表格表头自定义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"borderalign="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.lengththis.indeterminate = list.length > 0 && list.length < this.dataList.length;console.log(this.indeterminate, row.itemCheck);}
