el-table column 字典转换
时间: 2023-08-24 11:33:29 浏览: 67
在 `el-table` 中,如果需要将某一列的数据进行字典转换,可以使用 `scoped slot` 的方式实现。具体步骤如下:
1. 在 `el-table-column` 中设置该列的 `prop` 和 `label` 属性,如下所示:
```html
<el-table-column prop="status" label="状态"></el-table-column>
```
2. 在 `el-table-column` 中使用 `scoped slot`,并在该 `scoped slot` 中对数据进行字典转换,如下所示:
```html
<el-table-column prop="status" label="状态">
<template slot-scope="scope">
{{ scope.row.status === 1 ? '已完成' : '未完成' }}
</template>
</el-table-column>
```
上述代码中,我们使用了 `slot-scope` 获取到了该列的数据 `scope.row.status`,然后根据具体的字典转换规则,将其转换为对应的文本。
如果需要进行多种字典转换,可以使用 `computed` 计算属性或者 `methods` 方法来实现。例如:
```html
<el-table-column prop="status" label="状态">
<template slot-scope="scope">
{{ getStatusText(scope.row.status) }}
</template>
</el-table-column>
```
```javascript
methods: {
getStatusText(status) {
const statusMap = {
1: '已完成',
2: '待处理',
3: '已取消'
};
return statusMap[status];
}
}
```
上述代码中,我们使用 `getStatusText` 方法根据传入的 `status` 值来获取对应的文本。这样就可以实现多种字典转换的需求了。