element-UI 根据table中数据改变颜色 或显示对应内容
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
element-UI 根据table中数据改变单元格数据颜色或显示对应的内容的实现如下:
1.根据table中数据不同改变颜色(正数颜色为红色,负数颜色为绿色)

实现代码:
<el-table-column prop="sharesReturn" label="盈亏(元)">
<template scope="scope">
<span v-if="scope.row.sharesReturn>=0" style="color:red">{{ scope.row.sharesReturn }}</span>
<span v-else style="color: #37B328">{{ scope.row.sharesReturn }}</span>
</template>
</el-table-column>
<el-table-column prop="strategyEarnings" label="盈亏比">
<template scope="scope">
<span v-if="scope.row.strategyEarnings>=0" style="color:red">{{ scope.row.strategyEarnings }}</span>
<span v-else style="color: #37B328">{{ scope.row.strategyEarnings }}</span>
</template>
</el-table-column>
上述代码中的if-else还可以换成三目运算符。。。。。。。。。
2.根据table中数据不同显示对应的内容(1数字表示买,-1数字表示卖)

实现代码一:
<el-table-column prop="direction" label="买卖方向">
<template slot-scope="scope">
<span v-if="scope.row.direction=== 1">买</span>
<span v-if="scope.row.direction=== -1">卖</span>
</template>
</el-table-column>
实现代码二:
<el-table-column prop="direction" label="买卖方向" :formatter="statedirection">
</el-table-column> //关于formatter的解释各位同学可以查看官网
在下面方法中:
//买卖方向
statedirection(row) {
if (row.direction === 1) {
return "买";
} else if (row.direction === -1) {
return "卖";
}
},
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)