前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

1. 效果：如红框中部分。

一选全选：表头上的单选框选中则下面每行都选中。

全选一选：表中数据每行都选中时，自动选中表头中那个单选框。

2. 代码：

 我的表格是作的万能表格，所有表头、表数据都来自参数，此处略。

 对于表格使用及实现方法见博文：VUE : 双重 for 循环写法、table 解析任意 list

<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>