1. 效果：如红框中部分。
一选全选：表头上的单选框选中则下面每行都选中。
全选一选：表中数据每行都选中时，自动选中表头中那个单选框。
2. 代码：
我的表格是作的万能表格，所有表头、表数据都来自参数，此处略。
对于表格使用及实现方法见博文：VUE : 双重 for 循环写法、table 解析任意 list
代码语言：javascript复制<template>
<div>
<table class="table table-hover">
<thead>
<tr>
<th>
<!-- 表头中的单选框 -->
<input type="checkbox" id="selectAll">
</th>
<!-- 循环出表头，用英文的逗号拆分字串 -->
<th v-for="(item,index) in headerList.split(',')" :key="index">{{item}}</th>
</tr>
</thead>
<tbody>
<!-- 循环出有多少行数据，即 list 中有多少条数据，得到 list 中的每个元素 -->
<tr v-for="(item,index) in bodyInfoList" :key="index">
<td>
<!-- 表数据中首列单选框 -->
<input type="checkbox" class="selectSingle" @click="selectSingle()">
</td>
<!-- 循环取到元素的每个属性，并展示 -->
<td v-for="(val,index) in item" :key="index">{{val}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: "one",
props: {
headerList: {
type: String, // 亦可接收 Object 类型参数
default: "headerList"
},
bodyInfoList: {
type: Array,
default: "bodyInfoList"
}
},
methods: {
// 全选一选
// 此方法不可写在created、mounted中，会有时无效，
// 无效原因: html 还未加载完就已经初始化方法。
selectSingle() {
if ($(".selectSingle").length == $(".selectSingle:checked").length) {
$("#selectAll").prop("checked", true);
} else {
$("#selectAll").prop("checked", false);
}
}
},
created() {},
mounted() {
// 一选全选
$("#selectAll").click(function(e) {
// $("#selectAll").on("click", function() { 此写法和上面一行运行效果一样
$(".selectSingle").prop("checked", this.checked);
});
}
};
</script>
