<el-table border stripe :data="form.serialDateList" style="width: 100%" :row-class-name="rowClassName"> // rowClassName
<el-table-column type="index" width="60" align="center" label="序号" />
<el-table-column min-width="100" align="center" label="操作">
<template #default="{$index}">
<el-button type="danger" size="mini" icon="el-icon-delete" @click="delSerialItem($index)" />
</template>
</el-table-column>
</el-table>
。。。
<script>
methods: {
delSerialItem(index) {
// this.form.serialDateList.splice(index, 1) // 方式一：硬删除
this.form.serialDateList[index].delFlag = 1; // 方式二：软删除
},
// 行的样式控制方法，通过这个回调方法控制隐藏显示
rowClassName: function ({ row }) {
if (row.delFlag !== 0) {
return "hidden-row";
}
return '';
},
},
</script>
。。。
<style lang="scss">
.el-table .hidden-row {
display: none;
}
</style>