监听事件el-table-column
时间: 2024-01-24 17:15:34 浏览: 105
事件监听机制
监听事件el-table-column有两种方式:
1. 使用自定义模板:
```html
<el-table-column prop="auditStatus" label="审核状态">
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.available">审核通过</el-tag>
<el-tag type="danger" v-if="!scope.row.available">审核不通过</el-tag>
</template>
</el-table-column>
```
在这种方式下,我们可以在`<template>`标签中使用`slot-scope`来获取当前行的数据,并根据数据的不同进行相应的展示。
2. 使用`:formatter`属性:
```html
<el-table-column prop="auditStatus" label="审核状态" :formatter="formatAuditStatus"></el-table-column>
```
在Vue实例中定义一个方法`formatAuditStatus`,并将该方法绑定到`:formatter`属性上:
```javascript
methods: {
formatAuditStatus(row, column, cellValue) {
if (row.available) {
return '<el-tag type="success">审核通过</el-tag>';
} else {
return '<el-tag type="danger">审核不通过</el-tag>';
}
}
}
```
这种方式下,我们可以在方法中根据传入的参数来判断数据的状态,并返回相应的HTML代码来展示。
阅读全文