商丘集团网站建设,外网网站,网站设计目的与规划,电子商务网站建设情况使用Element的组件Table表格#xff0c;当使用树形数据再配合上多选框#xff0c;如下#xff1a; 会出现一种问题#xff0c;点击左上方全选#xff0c;只能够选中一级树节点#xff0c;子节点无法被选中#xff0c;如图所示#xff1a; 想要实现点击全选就选中所有的…使用Element的组件Table表格当使用树形数据再配合上多选框如下 会出现一种问题点击左上方全选只能够选中一级树节点子节点无法被选中如图所示 想要实现点击全选就选中所有的表格要另想办法方法如下 1、首先给table设置一个ref 2、绑定一个select-all方法 3、定义一个变量来识别全选框是否被选中默认为未被选中
checkedKeys: false,4、select-all绑定的方法如下Element的Table表格中select-all表示当用户手动勾选全选 Checkbox 时触发的事件 每次点击checkedKeys就取反对表格数据进行foreach循环使多选框选中/取消选中的关键代码为 this.$refs.multipleTable.toggleRowSelection(row, flag);flagtrue多选框选中flagfalse取消选中 该方法不会影响selection-change绑定的方法若状态为全选可以拿到全选的数据。
代码截图如下 全部代码如下
templatedivh1树型数据表格/h1el-table :datatableData stylewidth:80%;margin: 100px; row-keyid border default-expand-allselect-allselectAll refmultipleTable selection-changehandleSelectionChangeel-table-column typeselection width55/el-table-columnel-table-column propdate label日期 sortable width180/el-table-columnel-table-column propname label姓名 sortable width180/el-table-columnel-table-column propaddress label地址 width380/el-table-column/el-table/div
/template
script
export default {nama: Tree,data() {return {checkedKeys: false,tableData: [{id: 1,date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,children: [],},{id: 2,date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄,},{id: 3,date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄,children: [{id: 31,date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄,},{id: 3531,date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄,},{id: 8931,date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄,},{id: 32,date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄,children: [{id: 61,date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄,},{id: 42,date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄,children: [{id: 321,date: 2016-05-01,name: 王小虎33333,address: 上海市普陀区金沙江路 1519 弄,},],},],},],},{id: 4,date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄,},],};},methods: {selectAll() {this.checkedKeys !this.checkedKeys;this.splite(this.tableData, this.checkedKeys);},/*** 处理数据*/splite(data, flag) {data.forEach((row) {this.$refs.multipleTable.toggleRowSelection(row, flag);if (row.children ! undefined) {this.splite(row.children);}});},handleSelectionChange(val){console.log(val);}}
};
/script上述方法只能用全选,选父级的话子级是不会选中的 下面这个方法是选择父级子级可以选中,但是全选不能用
templatedivel-tablev-ifdeptList.length 0v-loadingloading:datadeptListrow-keyid:default-expand-allisExpandAll:tree-props{ children: children, hasChildren: hasChildren }select-allselectAllrefmultipleTableselection-changehandleSelectionChangeel-table-column typeselection :selectablerow !row.disabledtemplate slot-scopescopeel-checkbox v-modelscope.row.selected changeonRowSelectChange(scope.row)/el-checkbox/template/el-table-column!-- 其他列定义 --/el-table/div
/templatescript
export default {data() {return {deptList: [],loading: false,isExpandAll: false,checkedKeys: false};},methods: {selectAll() {this.checkedKeys !this.checkedKeys;this.splite(this.deptList, this.checkedKeys);},splite(data, flag) {data.forEach((row) {this.$refs.multipleTable.toggleRowSelection(row, flag);if (row.children row.children.length) {this.splite(row.children, flag);}});},onRowSelectChange(row) {if (row.children row.children.length 0) {this.traverse(row.children, row.selected);}},traverse(data, checked) {data.forEach((row) {this.$set(row, selected, checked);if (row.children row.children.length 0) {this.traverse(row.children, checked);}});},// 其他方法}
};
/script
