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

怼烎@ 2022-03-28 10:50 1028阅读 0赞

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70][]

2. 代码：

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

对于表格使用及实现方法见博文：[VUE : 双重 for 循环写法、table 解析任意 list][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>
            
            <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>

[Link 1]: https://www.captainai.net/jiangyu1013/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70]: /images/20220328/0da09f4bf4574d0796aeb154a9b8b581.png
[VUE _ _ for _table _ list]: https://blog.csdn.net/jiangyu1013/article/details/85708365