el-table 自定义表头el-checkbox,实现全选、单选

表格表头自定义el-checkbox，全选单选实现思路table数据添加勾选属性itemCheck，默认为false表头添加render函数，渲染el-checkbox，绑定chang事件在change事件中处理table数据，给itemCheck重新赋值，改变行勾选状态改变行勾选状态，处理表头全选、部分选中、取消全选状态处理table数据for (let val of data) {val.it

_freely

11221人浏览 · 2021-07-29 22:24:30

_freely · 2021-07-29 22:24:30 发布

表格表头自定义el-checkbox，全选单选

实现思路

table数据添加勾选属性itemCheck，默认为false
表头添加render函数，渲染el-checkbox，绑定chang事件
在change事件中处理table数据，给itemCheck重新赋值，改变行勾选状态
改变行勾选状态，处理表头全选、部分选中、取消全选状态

处理table数据

for (let val of data) {
       val.itemCheck = false;
}
 this.dataList = data || [];

template结构

<el-table :data="dataList"
                  border
                  align="center"
                  style="width: 100%;">
          <el-table-column :resizable="false"
                           min-width="30px"
                           :render-header="renderHeader"
                           align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.itemCheck"
                @change="toggleCheck(scope.row)"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="编号"
                           type="index"
                           :resizable="false"
                           min-width="30px"
                           align="center">
          </el-table-column>
          <el-table-column prop="parkName"
                           label="停车场名称"
                           :resizable="false"
                           align="center">
          </el-table-column>
          <el-table-column label="泊位号"
							prop="berthCode"
                           :resizable="false"
                           align="center">
          </el-table-column>
          <el-table-column label="车牌号"
                           :resizable="false"
                           align="center">
            <template slot-scope="scope">
              <div class="plateColor">
                <plateColor v-if="scope.row.plateNumber"
                            :plateCarNum="scope.row.plateNumber"
                            :plateColorNum="scope.row.plateColor" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="入场时间"
														prop="entryTime"
                           :resizable="false"
                           align="center">
          </el-table-column>
          <el-table-column label="停车时长"
                            prop="parkIngDuration"
                           align="center"
                           :resizable="false">
          </el-table-column>
          <el-table-column prop="entryDataSourceName"
                           label="入场数据来源"
                           align="center"
                           :resizable="false">
          </el-table-column>
          <el-table-column label="操作"
                           align="center"
                           :resizable="false">
            <template slot-scope="scope">
              <el-button type="text"
                         @click="getDataDetail(scope.$index)"
                         v-if="scope.row.exitTime ? true : false">
                查看
              </el-button>
              <el-button type="text"
                         @click="getDataDetail(scope.$index)"
                         v-if="scope.row.exitTime ? false : true">
                处理
              </el-button>
            </template>
          </el-table-column>
        </el-table>

表头renderheader

renderHeader(h, data) {
      return h("span", [
        h("el-checkbox", {
          on: {
            change: this.selectBox
          },
          props: {
            value: this.isCheck,
            indeterminate: this.indeterminate
          }
        })
      ]);
    }

表头change方法，改变table数据

selectBox() {
      this.isCheck = !this.isCheck;
      console.log(this.isCheck);
      let list = [...this.dataList];
      for (let val of list) {
        val.itemCheck = this.isCheck;
      }
      this.dataList = list;
    }

单行勾选状态，处理表头勾选状态

toggleCheck(row) {
// 获取已勾选
      let list = this.dataList.filter(item => item.itemCheck);
      this.isCheck = list.length === this.dataList.length
      this.indeterminate = list.length > 0 && list.length < this.dataList.length;
      console.log(this.indeterminate, row.itemCheck);
    }