element-ui el-table实现某列全选

代码实现

HTML

<el-table
   :height="height"
   min-height="200"
   size="small"
   ref="table"
   :data="form.tableData"
   :row-class-name="tableRowClassName"
   :highlight-current-row="true"
   border
   @row-click="tableRowClick"
 >
	<el-table-column label="退货检验" align="center" width="100">
       <template slot="header" slot-scope="scope">
          <el-checkbox
            class="returnCheck"
            :indeterminate="tableIsIndeterminate"
            :scope="scope"
            v-model="checkAll"
            :disabled="disabled"
            @change="handleChange"
          >退货检验el-checkbox>
        template>
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.fReturnGoodsCheck"
            :disabled="disabled"
            @change="tableCheckboxChange"
          >el-checkbox>
        template>
     el-table-column>
el-table>

JS

data(){
  return{
    // 全选标志
    checkAll: false,
    // 半选标志
    tableIsIndeterminate: false
  }
},
methods:{
  // 退货检验全选复选框，全选或全不选
    handleChange(val) {
      if (val) {
        this.form.tableData.forEach(item => {
          item.fReturnGoodsCheck = true;
        });
        this.tableIsIndeterminate = false;
      } else {
        this.form.tableData.forEach(item => {
          item.fReturnGoodsCheck = false;
        });
        this.tableIsIndeterminate = false;
      }
    },
    /**
     * @name: 退货检验列 checkbox部分选择
     * @event: change
     * 1、isAllTrue：checkAll为true，为全选标志，tableIsIndeterminate为false，半选标志不显示
     * 2、isAllFalse：checkAll为false，无标志，tableIsIndeterminate为false，半选标志不显示
     * 3、其他情况，为半选标志
     */
    tableCheckboxChange() {
      setTimeout(() => {
        let isAllTrue = this.form.tableData.every(
          item => item.fReturnGoodsCheck === true
        ); 
        let isAllFalse = this.form.tableData.every(
          item => item.fReturnGoodsCheck === false
        ); 
        if (isAllTrue) {
          this.tableIsIndeterminate = false;
          this.checkAll = true;
        } else if (isAllFalse) {
          this.tableIsIndeterminate = false;
          this.checkAll = false;
        } else {
          this.checkAll = false;
          this.tableIsIndeterminate = true;
        }
      }, 0);
    }
}

css

样式问题：el-checkbox勾选时会变为蓝色，与其他列标题不一致

修改样式后：

样式代码

>>> .el-checkbox.returnCheck .el-checkbox__input + .el-checkbox__label,
.el-checkbox.returnCheck .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #909399;
  font: 12px "Helvetica Neue";
  font-weight: bold;
}