1、通过@selection-change="handleSelectionChange"获取勾选的数据
2、通过this.$refs.multipleTable.toggleRowSelection(row, true);将数据回显
注意：toggleRowSelection方法的row数据必须是从tableData中获取
初级表格
<template><div><el-table ref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"@selection-change="handleSelectionChange"><el-table-column type="selection"width="55"></el-table-column><el-table-column label="日期"width="120"><template slot-scope="scope">{{scope.row.date }}</template></el-table-column><el-table-column prop="name"label="姓名"width="120"></el-table-column><el-table-column prop="address"label="地址"show-overflow-tooltip></el-table-column></el-table></div></template><script>export default {data () {return {selectionKeys: [1, 2],tableData: [{id: 1,date: '-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: 2,date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: 3,date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],}},// 注意 toggleRowSelection 方法的 row 必须是从 tableData 中提出来的// 只有这样获取的 row 才能确定哪一行数据被勾选 涉及到复杂数据指向地址问题mounted () {const {selectionKeys, tableData } = thisselectionKeys.forEach(key => {tableData.forEach(row => {if (row.id == key) {this.$refs.multipleTable.toggleRowSelection(row, true);}})})// 错误示范 虽然数据一摸一样 但是指向地址不同 并不能视为同一条数据// let selectionRows = [{// id: 1,// date: '-05-03',// name: '王小虎',// address: '上海市普陀区金沙江路 1518 弄'// }, {// id: 2,// date: '-05-02',// name: '王小虎',// address: '上海市普陀区金沙江路 1518 弄'// }]// selectionRows.forEach(row => {// this.$refs.multipleTable.toggleRowSelection(row, true);// })},methods: {handleSelectionChange (rows) {this.selectionKeys = rows.map(item => item.id);console.log(this.selectionKeys)},}}</script><style scoped lang="less"></style>
树状表格
参考文档01
参考文档02 有待考察
形如参考文档01
1、给每条数据绑定一个属性，如pageCheck，控制复选框状态
2、自定义一个全选复选框，通过定位覆盖element ui 表格原来的全选复选框
3、对el-table-column type="selection"写入插槽，自定义复选框，绑定状态属性如pageCheck属性以及相应的点击事件
<template><div class="table-wrap"><el-checkbox class="check-page-all"v-model="checkPageAll"@change="checkPageAllEv($event)"></el-checkbox><el-table ref="tableRef":data="tableData"style="width: 100%"row-key="id"borderdefault-expand-all:tree-props="{children: 'children'}"><el-table-column type="selection"width="55"><template slot-scope="scope"><el-checkbox v-model="scope.row.pageCheck"@change="pageCheckEv(scope)"></el-checkbox></template></el-table-column><el-table-column prop="date"label="数据"sortablewidth="180"></el-table-column><el-table-column prop="name"label="姓名"sortablewidth="180"></el-table-column><el-table-column prop="address"label="地址"></el-table-column></el-table></div></template><script>export default {data () {return {// 全选状态checkPageAll: false,// 选中数据集合selectionAllData: [],// 表格数据tableData: [{id: 1,parentId: null,date: '1',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{id: 2,parentId: null,date: '2',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},{id: 3,parentId: null,date: '3',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',children: [{id: 31,parentId: 3,date: '31',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',children: [{id: 311,parentId: 31,date: '311',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',},{id: 312,parentId: 31,date: '312',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',children: [{id: 3121,parentId: 312,date: '3121',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',},{id: 3122,parentId: 312,date: '3122',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',}]}]}, {id: 32,parentId: 3,date: '32',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}]},{id: 4,parentId: null,date: '4',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}],}},created () {this.initData()},methods: {// 数据初始化 绑定 pageCheck 属性initData () {let bindCheck = (data) => {data.forEach(item => {// item.pageCheck = falsethis.$set(item, 'pageCheck', false)if (item.children && item.children.length) {bindCheck(item.children)}});}bindCheck(this.tableData)},// 点击全选checkPageAllEv (state) {let checkAll = (data, checked) => {for (let item of data) {// item.pageCheck = checkedthis.$set(item, 'pageCheck', checked)if (item.children && item.children.length) {checkAll(item.children, checked)}}}checkAll(this.tableData, state)this.selectionAllData = []this.mapChecked(this.tableData)},// 行点击pageCheckEv (scope) {// 如果是勾选 则 自身 以及 所有子集都需要选中 所有父集也都需要选中// 如果是勾销 则 自身 以及 所有子集都需要取消 所有父级则需要逐级判断其子集是否有勾选的子集// 此外 无论是勾选还是勾销 都需要判断对全选状态的影响// 处理自身以及子集选中状态this.handleCheckAll(scope.row, scope.row.pageCheck)// 处理父级if (scope.row.parentId) {let parents = this.getParent(this.tableData, scope.row.parentId)if (scope.row.pageCheck) {// 如果是勾选 所有父集都需要选中parents.forEach(item => {this.$set(item, "pageCheck", true)})} else {// 如果是勾销 所有父级则需要逐级判断其子集是否有勾选的子集// 因为 parents 是逐级递归获取的 所以循环父集合也是逐级处理 // 只有当上级父元素处理完成 才能处理上上一级元素 // 因为上上一级元素的处理是根据其子集情况 即包含了上级父元素的处理状态// 万幸的是 object 是复杂数据类型 当你改变了上级父元素的处理状态 那么上上一级元素中的其处理状态也会变化parents.forEach(item => {let isCheck = item.children.some(child => child.pageCheck)this.$set(item, "pageCheck", isCheck)})}}// 处理对全选状态的影响this.checkPageAll = this.isCheckAllEv(this.tableData)this.selectionAllData = []this.mapChecked(this.tableData)console.log("selectionAllData", this.selectionAllData)},// 获取选中的数据 使用该方法前需要将 selectionAllData 原有数据清空mapChecked (rows) {let that = thisfor (let item of rows) {if (item.pageCheck) {that.selectionAllData.push(item)if (item.children && item.children.length) {that.mapChecked(item.children)}}}},// 处理自身以及子集选中状态handleCheckAll (row, checked) {let that = thisthat.$set(row, 'pageCheck', checked)if (row.children && row.children.length) {row.children.forEach(item => {that.handleCheckAll(item, checked)})}},// 判断数据是否全部选中isCheckAllEv (data) {let isCheckAll = truelet fn = (arr) => {for (let item of arr) {if (!item.pageCheck) {isCheckAll = falsebreak}if (item.children && item.children.length) {fn(item.children)}}}fn(data)return isCheckAll},// 逐级获取父级 父级集合getParent (data, parentId) {let parents = []let fn = (arr, parentId) => {for (let item of arr) {if (item.id == parentId) {parents.push(item)if (item.parentId) {// 注意 此处用的 data 即还是得从原来得查找范围重新开始查找fn(data, item.parentId)}break}if (item.children && item.children.length) {fn(item.children, parentId)}}}fn(data, parentId)return parents}}}</script><style scoped lang="less">.table-wrap {position: relative;.check-page-all {position: absolute;top: 20px;left: 11px;z-index: 100;}}</style>
