el-table 判断表格当中按钮有几个
时间: 2023-11-11 10:18:05 浏览: 75
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
可以通过在 el-table-column 的自定义模板中使用 v-if 指令来判断按钮是否需要显示。具体步骤如下:
1. 在 el-table 中定义需要显示的列,其中包括按钮列。
```html
<el-table :data="tableData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button v-if="scope.row.status === 'success'" @click="handleRetry(scope.row)">重试</el-button>
<el-button v-if="scope.row.status === 'error'" @click="handleIgnore(scope.row)">忽略</el-button>
</template>
</el-table-column>
</el-table>
```
2. 在组件中定义 handleRetry 和 handleIgnore 方法,用于处理按钮的点击事件。
```js
methods: {
handleRetry(row) {
// 重试逻辑
},
handleIgnore(row) {
// 忽略逻辑
},
}
```
在这个例子中,如果数据的状态为 success,则显示重试按钮,如果数据的状态为 error,则显示忽略按钮。其他状态不需要显示按钮。
阅读全文