el-table-column 添加条件判断
时间: 2023-10-24 16:16:12 浏览: 63
如果你想在 `el-table-column` 中添加条件判断,你可以使用 `render` 函数来自定义列的渲染。
例如,如果你有一个名为 `status` 的字段,你可以根据它的值来显示不同的内容。
```html
<el-table-column prop="status" label="状态">
<template slot-scope="scope">
<span v-if="scope.row.status === 'active'">激活</span>
<span v-else-if="scope.row.status === 'inactive'">未激活</span>
<span v-else>未知</span>
</template>
</el-table-column>
```
在上面的例子中,我们使用了 `slot-scope` 来获取当前行的数据对象 `scope.row`,然后根据 `status` 的值来显示不同的内容。如果 `status` 的值为 `active`,则显示“激活”;如果值为 `inactive`,则显示“未激活”;否则显示“未知”。
你也可以使用 `render` 函数来实现相同的效果:
```html
<el-table-column prop="status" label="状态">
<template slot-scope="scope">
{{ renderStatus(scope.row.status) }}
</template>
</el-table-column>
```
```javascript
methods: {
renderStatus(status) {
if (status === 'active') {
return <span>激活</span>
} else if (status === 'inactive') {
return <span>未激活</span>
} else {
return <span>未知</span>
}
}
}
```
在上面的例子中,我们定义了一个名为 `renderStatus` 的方法,根据 `status` 的值返回不同的内容。然后在 `el-table-column` 中使用 `renderStatus` 函数来渲染列的内容。