场景
业务上可能会有一些场景,表格中的数据根据状态变化展示。
例如:有一组数据状态有 is_edit=true 和 is_edit=false;is_edit=true 数据是用户编辑状态中的数据,列表展示并同时提交给后台;is_edit=false 数据是已保存的数据,页面不展示但是也要提交到后台。当前后台接口参数就是一个list数组。
方法
element-ui 暂时并没有表格渲染前的生命周期函数,目前只能通过 定义两个数组 或 手动过滤数据。
定义两个数组分别为:提交给后台的总数据 list 和 显示数据(即 is_edit=true 的数据),但是这种方法逻辑比较复杂,尤其是修改显示数据后,还需手动同步到总数据 list 上,所以更推荐手动过滤数据。
简单的过滤逻辑我们可以直接在 template 上添加过滤条件:
<template>
<el-table
:data="tableData.filter((v) => v.is_edit)" style="width: 100%">
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="grade" label="成绩" width="150"> </el-table-column>
</el-table>
</template>