ElementUi Table 全选反选常见问题

就是那块料

已于 2023-11-22 15:23:57 修改

阅读量452

点赞数

文章标签： elementui 前端 javascript

于 2023-11-18 10:00:09 首次发布

本文链接：https://blog.csdn.net/m0_61449795/article/details/134474715

版权

文章详细描述了在Vue前端开发中，如何使用el-table组件实现用户数据的行选择、全选、记忆功能以及相关处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

变量声明：

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
    }
  })
},