一、问题描述
项目上有一部分代码展示了待办与已办列表的数据,在同一页面进行切换展示,由于使用需要使用管道处理小数位的问题需要使用template,随后出现了数据显示错误的问题。
1.待办列表
2.已办列表
二、解决方式
在表格的切换展示过程中,当前一表格销毁后,后一表格某列的数据会继承在对应前一表格列的template标签,解决该问题需要使用v-if在表格切换时,同时对template标签销毁,即可解决。
三、代码展示(解决后)与结果展示
可以看到在已办列表的同一列处展示了错误的数据,在表格v-if销毁后,其template不会正常销毁而是被另一表格继承,解决方法为在列表切换时使用v-if对template进行控制即可。
<el-table-column header-align="center" align="center" showOverflowTooltip prop="year_plan_money" label="金额(万元)">
<template slot-scope="scope" v-if="activeName === 'todo'">
{{ scope.row.year_plan_money | reserveDecimal(2) }}
</template>
</el-table-column>