vue2eleui的table表格怎么根据值不同返回不同的字
时间: 2024-02-20 22:01:33 浏览: 36
可以使用 Vue.js 中的条件渲染来实现根据值不同返回不同的字。具体做法是在表格中定义一个 slot,然后根据数据的值在 slot 中渲染不同的字。
示例代码如下:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="score" label="分数">
<template slot-scope="scope">
<span v-if="scope.row.score > 90">优秀</span>
<span v-else-if="scope.row.score > 60">良好</span>
<span v-else>及格</span>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', score: 85 },
{ name: '李四', score: 72 },
{ name: '王五', score: 96 },
{ name: '赵六', score: 53 },
],
};
},
};
</script>
```
在上面的示例代码中,我们定义了一个表格,其中有两列,分别是“姓名”和“分数”。在“分数”这一列中,我们定义了一个 slot,并在 slot 中根据数据的值渲染不同的字,如果分数大于 90 分,则显示“优秀”,如果大于 60 分,则显示“良好”,否则显示“及格”。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![vue](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)