为什么element-ui中的row-key属性要写唯一值

最新推荐文章于 2025-07-22 11:14:32 发布

JingG459

最新推荐文章于 2025-07-22 11:14:32 发布

阅读量5.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： js 笔记文章标签： ui

本文链接：https://blog.csdn.net/JINGinC/article/details/121092986

笔记同时被 2 个专栏收录

32 篇文章

订阅专栏

13 篇文章

订阅专栏

本文介绍如何使用row-key属性将表格数据配置为树形结构，确保数据唯一性以避免页面卡顿或失效的问题。

设置表格的数据项为树形结构必须要给表格指定 `row-key`

  <el-table border :data="list" row-key="id">
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- 添加按钮级别的权限 添加就代表需要一个新的功能按钮
									按钮级别：
									type:2,
									pid:当前行的id
							-->
              <el-button v-if="scope.row.type===1" type="text" @click="hAdd(2,scope.row.id)">添加</el-button>
              <el-button type="text">编辑</el-button>
              <el-button type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

最后的效果是这样