checkbox多选以及如何读取选中行的数据

1.首先我们需要明确一个变量

indeterminate， indeterminate="true"的时候是半选的状态，indeterminate="false"的时候是对号的状态。

是控制我们半选状态的，我们第二张图是。indeterminate="false的状态

<th-table-column label="全选" min-width="20">
        <template slot="header" slot-scope="scope">
            <th-checkbox v-model="selectAll" :scope="scope" :indeterminate="indeterminate" @change="selectAllEvent">
            </th-checkbox>
        </template>
        <template slot-scope="scope">
          <th-checkbox v-model="scope.row.isSelect" @change="selectItemEvent"></th-checkbox>
        </template>
      </th-table-column>

 slot="Header"是为了现实全选最上面的正方框的。

data(){
return {
     selectAll: false,
     indeterminate: false,
 }
}

 控制全选的代码：

 selectAllEvent(val) {
      console.log('selectAllEvent val:', val);
      console.log('indeterminate', this.indeterminate);
      this.indeterminate = false;
      this.tableData.forEach(ele => {
        ele.isSelect = val;
      });
    },

单个勾选的时候

 selectItemEvent(val) {
      console.log('selectItemEvent val:', val);
      const selectArr = this.tableData.filter(ele => ele.isSelect);
      if (selectArr.length === 0) {
        this.selectAll = false;
        this.indeterminate = false;
      } else if (selectArr.length === this.tableData.length) {
        this.selectAll = true;
        this.indeterminate = false;
      } else {
        this.selectAll = false;
        this.indeterminate = true;
      }
      console.log('indeterminate', this.indeterminate);
    },

读取选中这一行的数据例如id

 const selectDatas = this.tableData.filter(ele => ele.isSelect).map(ele => ele.shopsId);