element-ui el-table使用v-if来控制列的显示隐藏出现列位置错乱问题

描述：

在el-table中使用v-if控制某些列的显示或者隐藏，当activeIndex数据发生改变时，下面这种写法会导致表格的列位置错乱

<el-table-column label="商品id" ></el-table-column>
<el-table-column label="商品转态" v-if="activeIndex === '1'" ></el-table-column>
<el-table-column label="服务费" v-if="activeIndex === '2'" ></el-table-column>

解决：

方法一：

<el-table-column label="商品id" :key="Math.random()"></el-table-column>
<el-table-column label="商品转态" v-if="activeIndex === '1'" :key="Math.random()"></el-table-column>
<el-table-column label="服务费" v-if="activeIndex === '2'" :key="Math.random()"></el-table-column>

方法2：

<el-table-column label="商品id" key="0"></el-table-column>
<el-table-column label="商品转态" v-if="activeIndex === '1'" key="1"></el-table-column>
<el-table-column label="服务费" v-if="activeIndex === '2'" key="2"></el-table-column>

总结：

其实两种方法都是给所有列加了key值
第一种方法好在key值是随机数，添加列或者修改列顺序时,写上:key=Math.random()就行，但是渲染时列表会出现一瞬间的晃动
第二种不会出现晃动的瑕疵，但是修改key值麻烦

element-ui el-table使用v-if来控制列的显示隐藏出现列位置错乱问题相关推荐

Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...
Element UI 中table合并单元格
Element UI组件库合并table单元格函数封装 DOM: <el-table:data="tableData"size="mini"class=& ...
element ui 的table单元格合并
element ui中的table表格数据是动态生成的,如果说后台要求我们对单元格进行合并,这个时候需要借助一个api,:span-method="arraySpanMethod" ...
二次封装Element Ui的Table中使用render渲染函数
render函数的使用 render在element UI中的使用 render函数是什么具体参数用法 render在element UI中的使用 {prop: 'button',label: '操 ...
关于Element UI中日期时间选择器在IE浏览器中初始化显示的兼容性问题
一.简单说明项目使用Vue+Element UI进行开发,使用了 DateTimePicker 日期时间选择器. 二.问题描述打开修改对话框(进行选择日期操作可以正常显示),在谷歌浏览器中初始化时 ...
Element UI的Table用法
Table 表格用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格基 2016-05-02 王小虎上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...
element ui中table合并相同内容单元格
一.遍历需要合并的集合,定义spanArr数组二.在table中增加事件三.调用objectSpanMethod方法,合并单元格
element UI中table操作栏更多按钮展示与折叠的实现
1.然后给大家看下动态图 2.解决思路: 一开始我的第一反应就是可以手写一个定位布局来点击弹出更多按钮弹框,后面看了下elementUI文档上有个组件可以利用,那就是Popover 弹出框废话不 ...

element-ui el-table使用v-if来控制列的显示隐藏出现列位置错乱问题

描述：

解决：

总结：

element-ui el-table使用v-if来控制列的显示隐藏出现列位置错乱问题相关推荐

最新文章

热门文章

element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题

描述：

解决：

总结：

element-ui el-table使用v-if来控制列的显示隐藏 出现列位置错乱问题相关推荐

最新文章

热门文章

element-ui el-table使用v-if来控制列的显示隐藏出现列位置错乱问题

element-ui el-table使用v-if来控制列的显示隐藏出现列位置错乱问题相关推荐