ElementUI的Table表格添加自定义头CheckBox多选框

　　在ElmentUI的Table表格组件中，也许你会使用type为selection值的多选框功能，但是此时设置的label属性不生效，不能设置标题名称；有时候我们的需求就是要添加标题名称，那该如何处理呢？当然你可以对其样式做特殊处理，也可以自定义标题，本文将描述如何利用自定义标题来添加多选框和标题名称，特别是在该过程的踩过的雷和填补过的坑。

　　（一）需求：在Table表格中新增一列用于批量操作当前页的该列，例如：通过多选框来对批量设置该列的两种属性状态，选中时表示全部隐藏，不选中时表示全部显示，若部分隐藏、部分显示时多选框呈现第三种样式状态，一般是短横线表示。

　　（二）方案：利用Table表格column的header属性。

1. 利用插槽进行设置，即slot="header"，这样就可以在表头中自定义样式来；若不设置该属性，那么是对列内容进行设置。
2. 具体的代码如下：

   首先在工程目录下安装element，通过npm i element-ui -S命令安装即可；
   然后在工程中引入element，在main.js文件中添加这样两条语句：
   import ElementUI from 'element-ui';
   Vue.use(ElementUI);
   接着，我们在App.vue文件中进行测试，添加如下代码：
   

   <template>
       <div id="app">
       <img src="./assets/logo.png">
       <el-table :data="tableData" style="width: 100%">
          <el-table-column
              label="姓名"
              prop="name">
          </el-table-column>
          <el-table-column
              label="性别"
              prop="sex">
          </el-table-column>
          <el-table-column align="right">
          <template slot="header" slot-scope="scope">
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
               @change="handleCheckAllChange">隐藏</el-checkbox>
          </template>
          <template slot-scope="scope">
              <el-checkbox v-model="scope.row.checked" @change="handleCheckOneChange">隐藏</el-checkbox>
          </template>
          </el-table-column>
       </el-table>
       <router-view/>
   </div>
   </template>
   
   
   <script>
   export default {
       name: 'App',
       data () {
         return {
           tableData: [{
              name: '李时珍',
              sex: '男',
              checked: false
           }, {
              name: '花木兰',
              sex: '女',
              checked: true
           }],
           checkAll: false,
           isIndeterminate: true
        }
      },
      methods: {
          handleCheckAllChange (val) {
              console.info('check all change is ', val)
              this.isIndeterminate = false
              this.tableData.forEach(item => {
                  item.checked = val
              })
          },
          handleCheckOneChange (val) {
              console.info('check one change is ', val)
              let totalCount = this.tableData.length
              let someStatusCount = 0
              this.tableData.forEach(item => {
                  if (item.checked === val) {
                       someStatusCount++
                  }
              })
              this.checkAll = totalCount === someStatusCount ? val : !val
              this.isIndeterminate = someStatusCount > 0 && someStatusCount < totalCount
          }
      }
   }
   </script> 

3. 运行后的效果图如下： 

　　在上图中，我们可以通过表头的隐藏多选框来批量设置列表数据，当我们选中上图“表头隐藏”多选框时，列表中的两个“隐藏”多选框都会被选中；当我们取消“表头隐藏”多选框时，列表中的两个“隐藏”多选框会同时被取消选中；当我们同时选中列表中的两个“隐藏”多选框时表头的“表头隐藏”多选框也会被选中；当我们同时取消列表中两个“隐藏”多选框时表头的“表头隐藏”多选框也会被取消选中；当列表中的两个“隐藏”多选框，一个被选中，另外一个没有被选中时表头的“表头隐藏”多选框会呈现第三种状态，样式本应该会是一条短横线，但是在上图中却没有显示预期的效果，这是在safari浏览器的效果，但是在chrome浏览器中会表现预期的第三种状态效果的。

　　4.  挖坑说明:

　　

　　其实之初在添加这个功能的时候我是没有添加slot-scope="scope"属性，因为在开发工具中提示红色的波浪形，表示

　　“[vue/no-unused-vars]
　　'scope' is defined but never used.eslint-plugin-vue

　　Peek Problem

　　No quick fixes available”，其实这只是eslint插件的语法检查，当时我就去掉了；此外，当时还没有添加v-model="checkAll"属性，只是添加@change事件响应，此此时操作界面时表头多选框的状态能够正常切换；但是当我把v-model="checkAll"属性添加后，操作界面时发现表头的多选框的状态只跟初始值checkAll有关，若checkAll初始值为false，那么表头的多选框就会一直是取消选中的状态；若checkAll初始值为true，那么表头的多选框就会一直是选中的状态。纳闷了很久，最后我无意中添加上slot-scope="scope"这个属性，操作界面，结果表头的多选框能够正常切换状态了。这就是我给自己挖的一个坑，在这里我对Vue中的插槽功能还不是很熟悉吧，需要补一补这方面的知识。不过，最后还是自己把这个坑给填上了。

　　5. 拓展

　　在自定义其它类型的表头时可以参考上述流程，框架是类似的，千万不要把插槽属性省略了，否则的话会有奇怪的坑出现。

 

------20200112勉