el-table-column在v-for情况下使用template情况下，更新循环的源数组，组件不刷新的解决办法

最新推荐文章于 2024-06-01 12:19:14 发布
最新推荐文章于 2024-06-01 12:19:14 发布
阅读量1.8k 收藏 1
点赞数 3
分类专栏： 问题经验总结 文章标签： vue.js elementui 前端 数组
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26708001/article/details/122083771
版权

最近遇到一个bug，el-table-column是用v-for生成，然后内容用了template模板，改变vue支持数组双向绑定的方法改变数组后，仍然值刷新，组件未刷新。
这是因为template作用域slot-scope监听不到，层级太深了，解决办法是给el-table加个:key=“Math.random()”，保证刷新数据后，el-table组件刷新key不同，触发整个表格组件刷新

qq_26708001
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
el-table-column使用v-for展示数据，＜template #defalut=“scope“＞不生效
weixin_45563717的博客
08-12 6170
el-table-column使用v-for展示数据，针对展示需要处理的数据使用平常的不生效该如何解决
【vue】el-table格式化el-table-column内容（主要的三种方法）
m0_67401499的博客
03-06 1万+
el-table格式化el-table-column内容 遇到一个需求，一个循环展示的table中的某项，或者某几项需要格式化。对于格式化的方法，主要有template scope、formatter； 一、template scope 、v-if判断 <el-table-column prop="cyxb" label="性别"> <template slot-scope="scope"> <span v-if="scope.row.cyxb == 0
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
12-29
先看看ElementUI里关于el-table的template数据结构： <el-table-
前端el-table-column使用template的新发现哈哈哈
最新发布
m0_60594323的博客
06-01 1240
在 Vue 和 Element UI 中，不能在同一个 el-table-column 中直接放置多个 template 标签，除非每个 template 标签都使用了不同的具名插槽。通过使用具名插槽（slot）区分它们
elementUI 的 table 表格改变数据不更新问题
热门推荐
weixin_43299180的博客
04-28 2万+
预期效果：点击输入框旁边的图标，输入框变为可输入状态；这里控制输入的 editable 字段不是 data 原有的属性，也不是 data 赋值时就存在的字段。 问题原因：在 Vue 实例创建时，以及 data 赋值时 editable 并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新。 解决方法： 1、给 data 赋值前把 editable 属性添加到数组里 这里就不贴代码了，大概思路就是：获取到列表信息之后缓存在一个临时数组里（不可以是 data 里面定义好的对象），循环遍历
vue父组件值更新子组件值不更新之el-table下的table-column中template下元素或子组件值不更新
涂涂
03-30 3527
问题：element-ui中table-column中有循环，子cell又是使用template(scope)渲染的，当循环数据更新（push,splice,或者重新赋值）时，可能出现子cell不变的情况，从而导致页面元素和循环数据对不上的报错问题 猜测：可能是template中的scope没有变化导致不更新，或者element-ui做了优化避免不必要更新导致的bug 解决：在table上加上...
el-table-column 采用v-for
weixin_45288172的博客
05-30 932
el-table-column 采用v-for
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="选择列" ...
详解使用element-ui table组件的筛选功能的一个小坑
10-17
在Element UI框架中，`el-table`组件是一个强大的表格组件，提供了丰富的功能，包括筛选功能。在实际开发中，我们可能会遇到一些小问题，比如在尝试实现自定义模板与筛选功能相结合时，可能会遇到筛选不生效的问题。...
【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx
12-29
在Vue.js应用中，实现`el-table`组件的拖拽排序功能可以借助第三方库`sortablejs`。`sortablejs`是一个轻量级的JavaScript库，它允许用户通过鼠标或触摸事件对HTML元素进行拖放排序。以下是使用`sortablejs`在Vue中...
el-table实现可编辑表格
Suzerk的博客
09-20 9329
实现el-table的可编辑表格如图所示： 以下展示部分代码： <el-table-column label="价格" min-width="20" align="center"> <template slot-scope="scope"> <el-input v-if="scope.row.edit" v-model="scope.row.price"
使用el-table-column中的formatter格式化某一列内容
qq_43218707的博客
04-23 5710
v-for循环生成的table，使用formatter选中其中一列并格式化 以保留两位小数为例：
el-table 实现可编辑表格
zhangxinrongr的博客
11-16 4025
【代码】el-table 实现可编辑表格。
element+vue之table 动态表格上处理formatter写法
Jasmin博客
11-27 1910
<el-table-column v-for="item in confirmHead" :key="item.label" :label="item.label" :prop="item.prop" :width="item.width" align="center" show-overflow-tool.
【通用表格组件】vue3 + element-ui + template 实现通用表格组件
qq_39404437的博客
10-28 6888
【通用表格组件】vue3 + element-ui + template 实现通用表格组件
el-table 表格内循环
懿_51335316的博客
04-20 1979
el-table 表格内循环。
在elementUI的el-table-column组件下使用v-for 循环 数组productInfoLis 中的对象
05-23
可以通过使用 `v-for` 循环遍历数组 `productInfoLis` 中的对象，然后在 `el-table-column` 组件中使用对象的属性作为列的数据源。 例如： ```html <template> <el-table :data="productInfoLis"> <el-table-column v-for="(item, index) in productInfoLis" :key="index" :label="item.name"> <template slot-scope="scope"> {{ item[scope.column.property] }} </template> </el-table-column> </el-table> </template> ``` 在上面的示例中，我们使用 `v-for` 循环遍历了 `productInfoLis` 数组中的每一个对象，然后在 `el-table-column` 组件中使用 `item.name` 作为列的标签名，并且通过 `scope.column.property` 获取列对应的属性名，最后通过 `item[scope.column.property]` 获取该属性的值，显示在表格中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值