【JS】element-ui table展示勾选状态

element-ui table 我将勾选的值存在multipleSelection中,在表格更新后,再遍历,来展示勾选状态。这样可行吗?

在使用 Element UI 的 el-table 组件时,将勾选的值存储在 multipleSelection 中,然后在表格更新后通过遍历这些值来展示勾选状态,这种做法理论上是可行的,但在实际操作中有一些需要注意的地方,下面为你详细分析。

实现思路

  1. 存储勾选的值 :当用户在表格中勾选行时,el-table 会触发 selection-change 事件,你可以在这个事件的处理函数中将勾选的行数据存储到 multipleSelection 数组中。
  2. 表格更新 :当表格数据更新时,需要重新设置表格的勾选状态。可以通过遍历 multipleSelection 数组,使用 el-tabletoggleRowSelection 方法来设置每一行的勾选状态。

示例代码

html 复制代码
<template>
  <div>
    <el-button @click="updateTableData">更新表格数据</el-button>
    <el-table
      ref="tableRef"
      :data="tableData"
      @selection-change="handleSelectionChange"
      style="width: 100%"
      multiple
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 30 }
      ],
      multipleSelection: []
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
    updateTableData() {
      // 模拟表格数据更新
      this.tableData = [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 30 },
        { id: 4, name: '赵六', age: 35 }
      ];
      // 重新设置勾选状态
      this.$nextTick(() => {
        this.multipleSelection.forEach(item => {
          const targetRow = this.tableData.find(row => row.id === item.id);
          if (targetRow) {
            this.$refs.tableRef.toggleRowSelection(targetRow, true);
          }
        });
      });
    }
  }
};
</script>

代码解释

  1. handleSelectionChange 方法 :当用户勾选或取消勾选表格行时,该方法会被调用,将当前勾选的行数据存储到 multipleSelection 数组中。
  2. updateTableData 方法 :模拟表格数据更新,更新 tableData 数组。在数据更新后,使用 $nextTick 确保 DOM 已经更新,然后遍历 multipleSelection 数组,使用 toggleRowSelection 方法设置每一行的勾选状态。

注意事项

  • 数据唯一性 :确保表格数据中的每一行都有一个唯一的标识(如示例中的 id),这样才能准确地找到需要勾选的行。
  • $nextTick 的使用 :由于 Vue 的响应式原理,数据更新后 DOM 不会立即更新,因此需要使用 $nextTick 确保在 DOM 更新后再设置勾选状态。

通过以上方法,你可以在表格更新后保留之前的勾选状态。

相关推荐
脑袋大大的7 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络9 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘9 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way9 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家9 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj16899710 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
GISer_Jing12 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆12 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding13 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js