变量声明:
selectKeysUser: [], selectUserObj: {},
<el-table ref="tableDataPerson" :height="330" :data="userTableData" border highlight-current-row row-key="id" @select="handleSelectionUserChange" @select-all="handleSelectUserAll" @selection-change="selectChangeUser" @row-click="clickChangeUserRow" >
前端方法:
// 行选中函数 若有删除,若无添加 handleSelectionUserChange(val, row) { this.selectKeysUser = val if (this.selectUserObj[row.id]) { delete this.selectUserObj[row.id] } else { this.selectUserObj[row.id] = row } this.selectKeysUser = Object.keys(this.selectUserObj) }, // 行选中函数 若有删除,若无添加 handleSelectUserRow(selection, row) { if (this.selectUserObj[row.id]) { delete this.selectUserObj[row.id] } else { this.selectUserObj[row.id] = row } this.selectKeysUser = Object.keys(this.selectUserObj) }, // 全选函数 点击全选遍历当页数据若无添加,若是反选则删除(判断是否是全选还是反选) handleSelectUserAll(selection) { this.userTableData.forEach((row, index) => { if (this.selectUserObj.hasOwnProperty(row.id)) { selection.length ? null : delete this.selectUserObj[row.id] } else { this.selectUserObj[row.id] = row } }) this.selectKeysUser = Object.keys(this.selectUserObj) this.selectUserObj = selection }, clickChangeUserRow(row) { this.clearSelectUser() this.$refs.tableDataPerson.toggleRowSelection(row, true) this.handleSelectUserRow(true, row) }, selectChangeUser(selection) { const _this = this _this.selectRow = selection this.tzn = selection this.qur = [] this.phone = [] for (var i = 0; i < selection.length; i++) { this.qur.push(selection[i].realName) this.phone.push(selection[i].phone) } }, clearSelectUser() { this.$refs.tableDataPerson.clearSelection() this.selectKeysUser = [] this.selectUserObj = {} }, // 记忆函数 memoryCheckedUser() { this.userTableData.forEach((row, index) => { const mt = this.$refs.tableDataPerson if (this.selectUserObj.hasOwnProperty(row.id)) { mt ? mt.toggleRowSelection(row, true) : undefined } else { mt ? mt.toggleRowSelection(row, false) : undefined } }) },