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

elementPlus 动态切换table内容

程序员文章站 2022-06-19 15:37:50
elementPlus 动态切换table内容table表格的内容变化:列变化、行变化 ...操作...

elementPlus 动态切换table内容

table表格的内容变化:

列变化、行变化


// 一小部分
<el-table :data="datas" :key="tableIndex" ...其他的省略了>
  <el-table-column prop="id" label="ID" v-if="判断条件"></el-table-column>
  ...
  <el-table-column label="操作">
  	...操作...
  </el-table-column>
</el-table>

若使用v-for,建议带上template。

// 带v-for的一小部分
<template v-for="(item,index) in cols">
	<el-table-column :prop="item.id" :label="item.name" v-if="判断条件"></el-table-column>
</template>

// js部分
...
this.tableIndex = Math.random();
...

其实表格加载属于懒加载,每次切换内容需要让表格重新加载一次
咱们要改变table内容,就要给表格加上索引,比如:例子中的tableIndex,每次切换改变索引值即可。还有就是不要用v-show,要用v-if。over~

本文地址:https://blog.csdn.net/qq_42264793/article/details/111910985