[JavaScript知识库]elementui中表格自定义复选框

elementui的表格自带选择项；但是有个需求是：全选按钮和下面的复选框不联动，也就是勾了全选按钮后，下面的复选框不会全部勾上；
elementui中提供了自定义表头：

<el-table-column align="center" width="80">
  <template slot="header" slot-scope="scope">
    <el-checkbox-group v-model="checkList1" @change="change1">
      <el-checkbox label="">
        <br />
      </el-checkbox>
    </el-checkbox-group>
  </template>
  <template slot-scope="scope">
    <el-checkbox-group v-model="checkList2" @change="change2">
      <el-checkbox :label="scope.row.id">
        <br />
      </el-checkbox>
    </el-checkbox-group>
  </template>
</el-table-column>

注：表头的v-model和下面每一项的v-model绑定不同的数组，即可不联动；
表头的复选框勾选后拿到的数组是：[""]；
下面的复选框勾选拿到的是每一项的id：["1", "2", "3", "4"];
可能大家有个疑问，下面的复选框是动态渲染的，为什么勾选后拿到的值都在同一个数组里面呢？
因为它们都绑定了同一个数组，自然勾选后的值就在一个数组里了；看下面的例子就知道了；

<el-checkbox-group v-model="checkList3" @change="change3">
  <el-checkbox label="1">
    <br />
  </el-checkbox>
</el-checkbox-group>
<el-checkbox-group v-model="checkList3" @change="change3">
  <el-checkbox label="2">
    <br />
  </el-checkbox>
</el-checkbox-group>
<el-checkbox-group v-model="checkList3" @change="change3">
  <el-checkbox label="3">
    <br />
  </el-checkbox>
</el-checkbox-group>

<!-- 上面等效于下面 -->

<el-checkbox-group v-model="checkList3" @change="change3">
  <el-checkbox label="1">
    <br />
  </el-checkbox>
  <el-checkbox label="2">
    <br />
  </el-checkbox>
  <el-checkbox label="3">
    <br />
  </el-checkbox>
</el-checkbox-group>

注：el-checkbox标签内有个br换行标签，主要的目的是隐藏复选框旁边的label文字显示，表格中的复选框不需要文字显示；
完整代码如下：

<template>
  <div class="container">
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column align="center" width="80">
        <template slot="header" slot-scope="scope">
          <el-checkbox-group v-model="checkList1" @change="change1">
            <el-checkbox label="">
              <br />
            </el-checkbox>
          </el-checkbox-group>
        </template>
        <template slot-scope="scope">
          <el-checkbox-group v-model="checkList2" @change="change2">
            <el-checkbox :label="scope.row.id">
              <br />
            </el-checkbox>
          </el-checkbox-group>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: "1",
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: "2",
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: "3",
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id: "4",
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      checkList1: [],
      checkList2: []
    }
  },
  methods: {
    change1() {
      console.log("111", this.checkList1);
    },
    change2() {
      console.log("222", this.checkList2);
    }
  }
}
</script>

效果如下：