【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 更新后再设置勾选状态。

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

相关推荐
LBJ辉1 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea8 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
试图让你心动10 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_10 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏10 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数11 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam11 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴85012 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的13 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
白玉cfc13 小时前
【iOS】网易云仿写
ui·ios·objective-c