elementui动态切换table列内容
程序员文章站
2022-06-07 11:07:07
...
实际开发中经常会动态显示表格的某些列的内容,我把我实现的方法记录并且分享一下。
首先,不要使用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-column
label="用户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.isAccount
this.toggleIndex = Math.random()
}
}
</script>
通过这种方法就可以实现表格动态切换了,当然,判断条件并不是只有这一种,你可以根据自己需求调整,只要每次调整完都修改一下索引值就可以。
上一篇: 点击切换的步骤条
推荐阅读
-
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
-
我用ASP写的m行n列的函数,动态输出创建TABLE行列
-
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
-
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
-
动态实现element ui的el-table某列数据不同样式的示例
-
Vue+elementui 实现复杂表头和动态增加列的二维表格
-
vue+element table表格实现动态列筛选
-
JS实现table表格内针对某列内容进行即时搜索筛选功能
-
vue+elementUI-el-table实现动态显示隐藏列
-
elementPlus 动态切换table内容