elementui中el-table设置type=“selection“时v-if不生效

最新推荐文章于 2024-07-05 11:27:32 发布
最新推荐文章于 2024-07-05 11:27:32 发布
阅读量2.8k 收藏
点赞数 5
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48398799/article/details/123652680
版权
"本文探讨了在Vue中如何解决两个页面复用同一表格组件时，不同时使用`type="selection"`导致的显示问题。关键在于通过`v-if`判断显隐并为每个实例设置唯一的`el-table` key属性。"
摘要由CSDN通过智能技术生成

问题描述：两个页面中复用一个组件中的表格，但是不同时使用type="selection"属性，于是使用v-if判断显隐，但是没有生效还导致表格每列字段错乱问题。

解决方案如下：

①、v-if判断显隐
在这里插入图片描述

②、el-table的key属性是它的唯一标识。 通过不同的key来给复用的table不同的标识
在这里插入图片描述

Sun_Gem
关注
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
Element el-table 中 type=“selection“ 的列 没法用 if 判断显示隐藏？？
dyp330的专栏
12-11 6561
你是否也遇到了Element el-table 中 type="selection" 的列 没法用 if 判断显示隐藏？？ 例如 /***此处还有两个 按钮graduate 一个 已毕业1 一个未毕业0 ,需求是当已毕业的时候 需要增加多选框，未毕业不需要增加多选框,点击按钮 切换页面表格中 多选框那列的显示隐藏 *****/ <el-table :data="tableData" ref="multipleTable" @selection-change="handleS..
el-table中如何隐藏全选选框
weixin_41919953的博客
06-04 4257
在el-table中单选用户时不可以有全选按钮的出现,需要实现的效果如下: 实现代码: el-table中添加:header-cell-class-name="cellClass"表头增加class函数 <el-table :data="tableData" ref="table" border :header-cell-class-name="cellClass" > <el-table-column type="selection" align=
vue+elementUI dialog中select框切换无效始终只显示一个的问题
最新发布
lijiangnan5201314的博客
07-05 286
新增的时候没有问题，可以切换选中不同的选项，但是编辑的时候，出现了无法切换的问题，增加change事件，发现值是变化的，页面就是没变化，应该是没有渲染导致。//在select框中的change事件中，加一段代码，强制重新渲染 @change="$forceUpdate()"。在做一个新增编辑的功能时，共用了一个dialog弹出层，弹出层中有一个选择框如图。$forceUpdate() 在页面初始化的时候，也可以加一下这个。最终问题解决了，也可以有效的切换选项了。placeholder="请选择"
解决在vue中使用element ui表格组件type为selection时切换分页前一页选中的变为未选中的问题
qq_51053759的博客
01-20 900
rowKey方法添加在data中
关于vue element ui type=selection 多选表格异步获取数据后选中默认选中的单行不起作用的问题
勤勇的博客
06-28 5084
this.$nextTick(function() { this.$refs.gateway.toggleRowSelection(row, true); }); 使用this.$nextTick
Element el-table 中 type=“selection“ 的列 没法用 if 判断显示隐藏？
weixin_38822843的博客
12-28 1393
Element el-table 中 type=“selection“ 的列 没法用 if 判断显示隐藏？
关于使用elementUI组件时，v-if导致table乱序的问题
nbnxaa的博客
03-04 2592
关于使用elementUI组件时，v-if导致table乱序的问题 table表格使用v-show不生效，在使用v-if时加入:key=Math.random()以防止列乱序
elementUI el-table 表设置type=“selection“时v-if不生效
AAAAahao_的博客
11-10 1335
问题描述： 两个页面复用一个表格组件，一个页面不需要多选框，一个需要。通过父组件去设置标识的时候，并不像想象中的那样，而是表的每个列乱套了。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/9d6a3fb7a8f04313a66a2e1da992f638.png#pic_center) ![在这里插入图片描述](https://img-blog.csdnimg.cn/9284dbf69a8f432eb66c4db5379d6e98.png?x-oss-process=im
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
总之，理解并熟练掌握Vue的`v-for`指令以及如何与ElementUI的`el-table`组件配合，是构建灵活可扩展的表格的关键。通过动态生成列，可以极大地提高代码的可维护性和复用性。希望这篇文章能对你在开发过程中有所帮助...
elementUi vue el-radio 监听选中变化的实例代码
10-16
在本篇文章中，将介绍如何在 Vue 项目中使用 ElementUI 的 el-radio 组件，并通过实例代码展示如何监听单选按钮组中选项的变化。同时，文章还涉及了使用 Vue 监听屏幕变化并根据变化来调整页面布局的技巧。 首先，...
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
ElementUI为el-table元素提供了直接设置高度（height）属性的方法，从而固定表头并实现内容的滚动。在本文中，将会详细探讨如何实现这一功能，并且提供动态监测浏览器高度来设置表格高度的解决方案。 ### ElementUI...
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
12-29
ElementUI2.0的表格的扩展： elementUI表格table elementUI文字提示Tooltip 如果要实现鼠标移到表头有注释或者弹框该怎么添加呢？ <el empty-text=正在加载中... data=contentList ...el-table-c
ElementUI中el-tree节点的操作的实现
10-15
在ElementUI中，`el-tree`组件用于展示树形数据，它提供了丰富的功能，包括节点的增删改查。在本教程中，我们将探讨如何实现`el-tree`节点的各种操作，包括获取选中节点的ID、添加节点、修改节点以及删除节点。 ...
vue2.0 + element UI 中 el-table 数据导出Excel的方法
08-27
Vue2.0 + Element UI 中 el-table 数据导出 Excel 的方法 以下是对 Vue2.0 + Element UI 中 el-table 数据导出 Excel 的方法的详细解释： 1. 安装相关依赖 在使用 Vue2.0 + Element UI 中 el-table 数据导出 ...
关于element-ui中，页面上有多个el-table并通过v-if、v-else等控制是否显示时，type=selection勾选框失效或不显示的问题
summer的博客
10-12 1528
刚开始是勾选框那一列直接空了什么都不显示，搜索了一下说是给el-table标签增加id，加了之后是显示了，但是点击任何选框都会直接取消全部选中效果，翻了半天源码也没发现到底是哪里事件冲突了还是怎么回事，烦了，干脆自己写勾选框了。
el-table 中 type=“selection“ 用 v-if 判断切换时全选框失效
zuo_zuo_blog的博客
12-20 1262
原因： 第一个代码段里el-table 标签内增加 key="" ，key 不同表示不同表格，会重新渲染 <el-table :data=“tableData” @selection-change=“handleSelectionChange” > 此时可以了 <el-table :data="tableData" :header-cell-style="tableHeaderColor" :cell-style="{ 'te.
element el-table 全选selection加v-if刷新串行
04-05 1156
解决办法，加了key=Math.random() <el-table-column type="selection" width="55" :key="Math.random()" v-if="promotionShopScope==2"> ...
el-table-column type="selection"使用disabled不生效
05-25
`el-table-column` 中的 `type="selection"` 是用于显示一个多选框的，而 `disabled` 属性是用于禁用一个元素的，这两者的作用是不同的，所以在 `el-table-column` 中使用 `disabled` 是不会生效的。 如果你想禁用某些行的多选框，可以通过给数据源中的数据项设置 `disabled` 属性来实现。例如： ```javascript [ { name: '张三', age: 18, disabled: true // 设置为 true 表示该行的多选框禁用 }, { name: '李四', age: 20, disabled: false // 设置为 false 或者不设置表示该行的多选框可用 } ] ``` 然后在模板中，通过 `row` 的 `disabled` 属性来设置多选框的禁用状态，示例代码如下： ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column type="selection" /> <el-table-column prop="name" label="姓名" /> <el-table-column prop="age" label="年龄" /> </el-table> </template> ``` ```javascript export default { data() { return { tableData: [ { name: '张三', age: 18, disabled: true }, { name: '李四', age: 20, disabled: false } ] } } } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值