新来的产品想要大改造权限设置，行可以点，列也可以点，有点复古逆天
尝试，适合固定的已知的列，如果以后是接口动态列，估计还得改
<!-- 行全选 --><el-table-columnalign="center":resizable="false" fixed="left"><template slot="header" slot-scope="scope"><el-checkbox v-model="allChecked.all" @change="handleAllHeaderCheck('all')"></el-checkbox></template><template slot-scope="scope"><el-checkbox :value="scope.row.all"@change="handleLineCheck(scope.row)"/></template></el-table-column><!-- 功能列 --><el-table-column label="功能" align="center"><template slot="header" slot-scope="scope"><span>功能</span><el-checkbox v-model="allChecked.function" @change="handleAllHeaderCheck('function')"></el-checkbox></template><template slot-scope="scope"><el-checkbox v-model="scope.row.function"></el-checkbox></template></el-table-column> data(){return {// 表头复选框的状态allChecked: {all: false,function: false,// ... 其他列的状态},list:[...all: false,function: false,// ... 其他列的状态children: [{...all: false,function: false// ... 其他列的状态},]}}// 处理表头复选框点击handleAllHeaderCheck(column) {const checked = this.allChecked[column]// 递归深度遍历list 更新该列所有行的复选框状态function deepTraversal(list) {list.forEach(item => {item[column] = checkedif(item.children && item.children.length) {deepTraversal(item.children)}})}deepTraversal(this.list) }// 点击进行行全选handleLineCheck(row) {// 获取新的勾选状态(取反)const newCheckedState = !row.all let index = this.list.findIndex(item => item.name == row.name)// 更新该行所有复选框状态for(let key in this.allChecked) {// row[key] = newCheckedStatethis.$set(this.list[index], key, newCheckedState) } // // 如果有子节点，递归更新子节点的状态// if(row.children && row.children.length) {// const updateChildren = (children) => {// children.forEach(child => {// for(let key in this.allChecked) {// child[key] = newCheckedState// }// if(child.children && child.children.length) {// updateChildren(child.children)// }// })// }// updateChildren(row.children)// }}
细节也暂未实现，比如全选行/列情况下 取消某一勾选后 indeterminate 的值的监听