elementui动态切换table列内容

实际开发中经常会动态显示表格的某些列的内容，我把我实现的方法记录并且分享一下。
首先，不要使用v-show，要使用v-if。
其次，表格加载属于懒加载，所以每次切换内容需要让表格重新加载一次
实现方法，给表格加索引，每次切换改变索引值
直接上代码吧，通俗易懂

// 控制表格切换
<el-button type="primary"  @click="toggleData">切换表格</el-button>
// 表格内容
<template><el-row class="m-t-20"><el-table :data="list"border:height="h":key="toggleIndex"id="out-table"class="nowrap"><el-table-columnlabel="用户ID"width="200"align="center"v-if="isAccount"></el-table-column><el-table-column prop="roomId"label="聊天室ID"width="200"align="center"v-if="!isAccount"></el-table-column></el-table></el-row>
</template>
<script>// data数据data(){return {isAccount: true, // 默认显示某些数据toggleIndex:0 // 设置索引默认值}}// 方法methods:{// 每次需要切换时需修改布尔值和索引值，要注意，索引值只需不一样即可，没有其他特殊要求toggleData(){this.isAccount = !this.isAccountthis.toggleIndex = Math.random()}}
</script>

通过这种方法就可以实现表格动态切换了，当然，判断条件并不是只有这一种，你可以根据自己需求调整，只要每次调整完都修改一下索引值就可以。

elementui动态切换table列内容相关推荐

vue+elementUI动态生成表格列
 <template><section><el-col :span="24" cl ...
vue动态设置table列的显示与隐藏并且可以随意拖地排序(element-ui或Antd-ui )
最终效果如下页面只需要设置两个参数(适用于element及antd) columnSetting // 是否显示列设置按钮 // name="TtableColumnSet" / ...
vue + elementui table 列内容相同自动合并单元格完整代码
效果图 <el-table :data="gridData" border class="det-div" :span-method="obje ...
Bootstrap table列内容过长，显示固定长度，超过内容隐藏
今天在使用bootstrap的时候,某一列的内容长度过于长,导致table表格显示错位,非常的不美观,因此,觉得想一个办法,将其所在列的宽度设置为定值,令其超过指定长度的时候,隐藏超过指定 ...
PowerBI实用技巧：案例一（动态切换坐标轴列值，例如交叉表头、列，图表坐标轴等）
前段时间工作上面有一个需求,用户想要自己通过切片器来控制坐标轴的维度,那么这遍文章我就主要是要介绍一下如何制作动态的坐标轴. 这次分析的数据是销售的最低价格,分别从周日期.天日期和promotions ...
elementUI tab 切换 table表头消失
问题:利用elementUI tab 组件切换中,其中一个table表头消失解决:开始以为是table滚轮高度设置的不对,后来发现修改table高度后,第二个tab中表头依旧消失,最后查看样式,发 ...
ElementUI：表格table列宽度压缩出现空白
表格el-table列宽度被用户压缩后,右侧会出现一块空白 table {width: 100% !important; } 增加样式后,怎么拖拽列宽度,表格的整体宽度都是100%了.
如何在elementUi动态表格table中翻译字典值。vue通用方案
实现思路: 先渲染动态行,然后在行里面添加slot插槽,写需要翻译字典的判断. vue的v-for 的子组件里面 v-if . 注意v-for与v-if不要写在同一标签内. 例子: <el-ta ...
elementui table组件和popover实现表格列内容过长，显示隐藏多余字段，hover显示所有内容；无内容或则内容少则不显示popover
elementui table组件和popover实现表格列内容过长,显示隐藏多余字段,hover显示所有内容:无内容或则内容少则不显示popover 1.场景效果 2.实现 3.进阶版 1.场景效果 ...

elementui动态切换table列内容

elementui动态切换table列内容相关推荐

最新文章

热门文章