VUE：checkbox 单选框（单选、多选）、一选全选 / 全选一选、表格单选列实现

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

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>