el-table隐藏某行
时间: 2023-11-07 10:51:59 浏览: 108
要隐藏el-table中的某行,你可以使用row-class-name属性和自定义方法来实现。在el-table的template中添加row-class-name属性,并将其绑定到一个自定义的方法上。在这个方法中,你可以根据行的数据来判断是否隐藏该行,如果需要隐藏,则返回一个自定义的class名称,否则返回空字符串。
示例代码如下:
```
<template>
<el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
tableRowClassName: function (row, index) {
if (row.date == '2016-05-01') {
return 'hidden-row';
}
return '';
}
},
data: function () {
return {
tableData2: [
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
{ date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
{ date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }
]
}
}
}
</script>
<style>
.el-table .hidden-row {
display: none;
}
</style>
```
在上面的示例代码中,我们定义了一个自定义class名称hidden-row,并在方法tableRowClassName中判断日期是否为'2016-05-01',如果是,则返回这个class名称,否则返回空字符串。在样式中,我们使用display: none来隐藏这个class名称对应的行。
阅读全文