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

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