当前位置: 首页 > Web前端 > vue.js

check

时间:2023-04-01 13:00:30 vue.js

el-table树形结构在element-ui2.13中,树形表添加checkbox后,无法选中substructure。于是听着在表格上点击全选,根据数据的子节点手动切换是否选择。模板如下:{{selectArr.map(el=>el.id)}}取消选择

data如下tableData:[{id:1,date:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{id:2,date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1517弄'},{id:3,date:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路1519弄',childList:[{id:31,date:'2016-05-31',name:'王小虎',address:'上海市普陀区金沙江路1519弄'},{id:32,date:'2016-05-32',name:'王小虎',address:'上海市普陀区金沙江路1519弄'}]},{id:4,date:'2016-05-04',name:'王Xiaohu',address:'上海市普陀区金沙江路1516弄'}],selectArr:[]脚本代码如下select(selection,row){if(selection.some(el=>{returnrow.id===el.id})){if(row.childList){row.childList.map(j=>{this.toggleSelection(j,true)})}}else{if(row.childList){row.childList.map(j=>{this.toggleSelection(j,false)})}}},全选(seelection){//只要第一层tabledata在selection中,就全部选中constisSelect=selection.some(el=>{consttableDataIds=this.tableData.map(j=>j.id)returntableDataIds.includes(el.id)})//只要第一层tableDate不在selection中,就不会被选中constisCancel=!this.tableData.every(el=>{constselectIds=selection.map(j=>j.id)returnselectIds.includes(el.id)})if(isSelect){selection.map(el=>{if(el.childList){el.childList.map(j=>{这个.toggleSelection(j,true)})}})}if(isCancel){这个。表数据。map(el=>{if(el.childList){el.childList.map(j=>{this.toggleSelection(j,false)})}})}},selectionChange(selection){this.selectArr=selection},toggleSelection(row,select){if(row){this.$nextTick(()=>{this.$refs.table&&this.$refs.table.toggleRowSelection(row,select)})}},cancelAll(){这个.$refs.table.clearSelection()}有问题。手动切换selection会多次切换table的selection-change,满足基本效果。希望有其他方法留言