使用el-table时el-table-column的顺序位置改变的问题

最新推荐文章于 2024-07-12 16:16:13 发布

zhekua0305

最新推荐文章于 2024-07-12 16:16:13 发布

阅读量5.2k

点赞数 12

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/zhekua0305/article/details/117961502

版权

在Vue项目中使用el-table时遇到el-table-column顺序错乱的问题，通过在el-table-column中添加随机key值可以有效解决。当v-if条件切换时，不同的key将触发组件重新渲染，从而保持正确的显示顺序。此方法适用于动态展示表格列的情况。

摘要由CSDN通过智能技术生成

使用el-table时el-table-column的顺序位置改变的问题

解决方法

解决方法

	<el-table>
		<el-table-column
	          v-if="currentTabSelector == '欠费项目'"
	          label="当前欠费总额"
	          :key="Math.random()"
	          prop="projectArrearage"
	      />   
	      <el-table-column
	          v-if="currentTabSelector != '欠费项目'"
	          label="应收总额"
	          prop="receivable"
	          :key="Math.random()"
	        />  
      </el-table>

因为使用了v-if,导致el-table-column的顺序出现变化，
在el-table-column中加入一个随机的key值，这样界面切换的时候检测到不同的key值就会重新去加载