欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>

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