el-table 的key属性

最新推荐文章于 2024-08-01 14:08:25 发布
最新推荐文章于 2024-08-01 14:08:25 发布
阅读量1.6w 收藏 14
点赞数 7
文章标签： javascript python ui ViewUI
原文链接：https://my.oschina.net/u/133911/blog/1824406
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

在阅读[vue-element-admin]代码时候,发现有以下写法:

<el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">

其中key这个属性怎么都没查到.

最后,带issue里面查到了说明https://github.com/PanJiaChen/vue-element-admin/issues/656.

原来这个key属性是vue自带特殊属性,主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不更新这个key的话,显示隐藏列的时候,部分DOM不会重新渲染,导致table变化时候没有动画过度,显得很生硬.

参考vue说明:https://cn.vuejs.org/v2/api/#key

心得:于细微之处见真章.

转载于:https://my.oschina.net/u/133911/blog/1824406

weixin_33859231
关注
el-table用key解决表格数据显示不正确
陈怂怂的博客
03-08 4325
key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
el-element 的 el-table :key=“tablekey“
m0_52113402的博客
01-14 5786
三次踩坑，皆因:key el-table上边的:key属性，从我最开始使用并没有给予他较多的关注 ，后来table用多了，频频出现数据更新但是视图不显的情况，才慢慢发现他的用途 主要为多层数据没有即时更新做辅助 看过一篇文章有具体的用法，在这里放上链接this.tablekey != this.table 我自己的踩坑历程就是，以为用了v-if和v-else，两个table绑一个tablekey不会有影响，但是，bug出现了，当时代码的表格数据从后台拿到后做了多层处理后才在页面上渲染的，出现部分列数据不显示
el-table（vue3 总结）
最新发布
qq_38210427的博客
08-01 427
vue中将 后台返回的0，1等 代码转换成 男，女等汉字。_vue2中01转化性别-CSDN博客
Vue进阶（幺伍贰）：el-table-column :key 应用
IT全栈 华强工作室
12-11 1万+
引言 在前端项目开发过程中，el-table展示的结果列使用组件形式引入，其中某些字段通过:formatter方法转码，结果栏位的字段显示/隐藏控制也使用组件形式引入，前端在控制字段显示属性时，发现码值转换及字段信息展示均有问题。 问题分析 通过阅读代码结构，发现el-table-column通过template循环生成，由于template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上。有关表格数据渲染中key的作用如下： key作为一个DOM节点的标识值
element table key的使用
u010219889的博客
12-21 4395
vue，使用elementui，在table中，第一列需要根据条件显示index或selection，使用v-if后，需要在table加上 :key 代码如下： <el-table ref="multipleTable" id="table" border :data="tableData" :key="isIndex"> <el-table-column v-if="isIndex == 1" type="index" label="序号" width="55"&
el-table根据接口key值循环数据
一个超爱喝可乐的web前端攻城狮
10-14 804
el-table根据接口key值循环数据 1.tableData为数据数组 <el-table :data="tableData"> <el-table-column v-for="(key,index) in Object.keys(tableData[0])" :key="Math.random(index)" :label="key" :prop="key" /> </el-table> 2.删除数组对象中不
table循环key vue_VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
weixin_34770855的博客
01-14 473
先看看ElementUI里关于el-table的template数据结构：:data="tableData"style="width: 100%">prop="date"label="日期"width="180">prop="name"label="姓名"width="180">prop="address"label="地址">再看看ElementUI里关于el-table...
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
<el-table-column v-for="(col, index) in columns" :key="index" :label="col.label" :prop="col.prop" :sortable="col.sortable" :show="col.show"></el-table-column> </el-table> <el-dialog title="选择列" ...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
首先，ElementUI的`el-table`组件通常通过`<el-table-column>`标签来定义每一列的属性，如`prop`、`label`和`width`等。例如，以下是一个静态的表格列定义： ```html <el-table :data="tableData" style="width: ...
el-data-table:element基于element-ui，轻松实现结界
05-13
创建el-data-table来解决业务问题，因此在其中设置了CRUD逻辑。 例如，要开发user api，请假设其相对路径如下： / api / v1 / users 宁静的CRUD API应该是： 取回 GET / api / v1 / users ? page = 1 & size = 10...
vue+element获取el-table某行的下标,根据下标操作数组对象方式
10-14
在Vue.js中，我们常常需要在使用Element UI库的表格组件（el-table）时获取某一行的下标，以便根据下标来对数组对象进行操作，如替换或删除。本文将详细介绍如何在Vue结合Element UI环境下实现这一需求，并涉及文件...
el-table 列里面嵌套 el-table
weixin_42066070的博客
02-11 6840
一、达到的效果如下图： 二、实现流程 2 <el-table :data="tableData" row-key="id" ref="evtTable"> <!-- align="left" --> <el-table-column type="expand"> <template slot-scope="props"> <el-table :dat
el-table设置row-key
热门推荐
纳兹咩SAMA的博客
01-20 2万+
el-table中的row-key vue中key作用 key的作用就是更新组件时判断两个节点是否相同。相同就复用，不同就删除旧的创建新的。如果不添加key组件默认都是就地复用，不会删除添加节点，只是改变列表中的文本值。添加key之后，Vue对比节点内容不一致时，就会认为是两个节点，会先删除掉旧节点，然后添加新节点。 例： el-table没有给每一行添加key时，当我们删除第二行数据时，焦点会自动聚焦在变为第二行的第三行数据按钮上。 原因： 删除一行数据时，Vue会认为我们把2变成了3，把3删除了。所以只
vue el-Table表格当前行的key值拿到并渲染至页面
weixin_47482311的博客
03-11 3334
表格 点击详情显示当前行的详细信息 表格添加@row-click <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" @row-click="getDetails"> 写事件拿到当前行信息 【注】row是变量 页面内使用this.row就可以渲染页面了 getDetails(row){ // console.log(row) this.rows = row
ElementUI el-table遍历实现表格的自定义列【key值为列名】
yangwq的博客
06-08 6855
<template> <div> <el-table :data="resultTable" border ref="multipleTable" tooltip-effect="light" size="mini"> <el-table-column type="index" label="序号" width="50" align="center"></el-table-column> .
VSCode 开发Vue必备插件
2301_78416672的博客
05-06 581
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
el-table删除row时，只能删除最后一个时，通过添加key属性解决
weixin_45042868的博客
11-24 1128
在使用element ui 时，使用el-table时，在template中添加了自定义组件后，发现删除时，只能删除只能删除最后一条记录了，去掉就正常。。。什么强制更新 forceUpdate，重新赋值都不好使，最后是通过增加一个key属性解决的，这个key不能使用scope.$index,得使用其它的唯一值。 <el-table-column prop="transNum" label="数量" min-width="30%" align="center"> <template s
vue的el-table巨坑
jhf123000的博客
12-02 512
el-table
el-table-column :key应用
abc81163788的博客
01-25 2120
在el-table-column标签加入:key="Math.random()"属性，这个key属性是vue自带的特殊属性,主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes，依次来提升页面渲染性能。如果不更新这个key的话,显示/隐藏列的时候,部分DOM不会重新渲染,导致table变化时候内容错乱。 ...
el-table row-key
05-22
在 Element UI 的表格组件 el-table 中，如果需要对表格的行进行操作，一般需要给每一行设置一个唯一的标识，这个标识就是 row-key。row-key 可以是每个数据项的某个唯一值，比如 id，也可以是某个符合条件的函数返回值。 设置 row-key 后，在使用 el-table 的时候，就可以方便地获取当前操作的行数据，比如进行删除、修改等操作。同时，在使用 el-table 的时候，row-key 还有一个很重要的作用就是提升表格渲染的性能，因为设置了 row-key 后，Vue.js 可以更快地找到需要更新的行数据。 总之，设置 row-key 是在使用 el-table 组件时必不可少的一个属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值