在饿了么ui的框架中,输入数据el-form,输出数据el-table。有时候产品想让枯燥的表格来点动态的样式,比如不同的内容展示不同的样式,对于这个需求,其实方式有很多种,本文列举两种,以供参考。
效果图如下
代码如下
<template> <div id="app"> <!-- 需求:三国人物表格,要求不同的国别展示不同的颜色(魏国红色、蜀国黑色、吴国蓝色) --> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="nation" label="国别" width="180"> <!-- 思路通过模板插槽,获取对应的数据,不同的数据展示不同的颜色,当然只能让显示一个(通过v-if控制) --> <template scope="scope"> <div v-if="scope.row.nation == '魏国'" style="color:red;font-weight:bold;">{{scope.row.nation}}</div> <div v-if="scope.row.nation == '蜀国'" style="color:black;font-weight:bold;">{{scope.row.nation}}</div> <div v-if="scope.row.nation == '吴国'" style="color:blue;font-weight:bold;">{{scope.row.nation}}</div> </template> </el-table-column> <el-table-column prop="bornPlace" label="出生地方"> </el-table-column> </el-table> </div> </template> <script> export default { name: "app", data() { return { tableData: [ { name: "刘备", nation: "蜀国", bornPlace: "涿郡涿县(河北省涿州市)", }, { name: "曹操", nation: "魏国", bornPlace: "沛国谯县(安徽省亳州市)", }, { name: "孙权", nation: "吴国", bornPlace: "吴郡富春县(浙江省杭州市富阳区)", }, { name: "关羽", nation: "蜀国", bornPlace: "河东郡解县(山西省运城市盐湖区解州镇)", }, ], }; }, }; </script>
方式一总结
这个第一种方式,虽然能实现效果,但是代码都写在el-table里面了,看起来比较臃肿,如果只要求动态展示两三种样式的话,还可以写,但是如果有七八种甚至更多样式动态展示,这种写法就会十分臃肿,且后期不太好维护。我个人推荐第二种方式,就是使用vue自带的 :style 动态绑定样式来实现,不仅可以简洁代码,而且可以实现更加丰富的效果。如下:
效果图如下
代码如下
<template> <div id="app"> <!-- 需求:三国人物表格,要求不同的国别展示不同的颜色(魏国红色、蜀国黑色、吴国蓝色) --> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="nation" label="国别" width="180"> <!-- 思路通过模板插槽,获取对应的数据,通过vue动态style的方法,动态显示不同的颜色,这种方式更加灵活 --> <template scope="scope"> <!-- 意思是:给这个div绑定动态样式,颜色color的属性值为getColorByNation()这个方法的返回值,所以只需要通过传过去的scope 对方法的返回值做动态设置即可 --> <div :style="{color:getColorByNation(scope),fontSize:getSizeByNation(scope),fontWeight:'bold'}">{{scope.row.nation}}</div> </template> </el-table-column> <el-table-column prop="bornPlace" label="出生地方"> </el-table-column> </el-table> </div> </template> <script> export default { name: "app", data() { return { tableData: [ { name: "刘备", nation: "蜀国", bornPlace: "涿郡涿县(河北省涿州市)", }, { name: "曹操", nation: "魏国", bornPlace: "沛国谯县(安徽省亳州市)", }, { name: "孙权", nation: "吴国", bornPlace: "吴郡富春县(浙江省杭州市富阳区)", }, { name: "关羽", nation: "蜀国", bornPlace: "河东郡解县(山西省运城市盐湖区解州镇)", }, ], }; }, methods: { // 动态设置颜色 getColorByNation(scope){ console.log(scope); // 打印一下传过来的scope是对应表格不同行的整行的数据,如下有图片: if(scope.row.nation == "魏国"){ return "red" }else if(scope.row.nation == "蜀国"){ return "black" }else if(scope.row.nation == "吴国"){ return "blue" } }, // 动态设置字体大小 getSizeByNation(scope){ if(scope.row.nation == "魏国"){ return "14px" }else if(scope.row.nation == "蜀国"){ return "18px" }else if(scope.row.nation == "吴国"){ return "24px" } } }, }; </script>
打印传过去的scope
方式二总结
这种通过vue绑定样式来控制,比第一种方式,灵活很多。毕竟第一种方式是写在el-table里面,第二种方式是写在methods方法里面。具体用那种,看场景需求。
到此这篇关于动态实现element ui的el-table某列数据不同样式的示例的文章就介绍到这了,更多相关动态实现element ui的el-table某列数据不同样式的示例内容请搜索站长技术以前的文章或继续浏览下面的相关文章希望大家以后多多支持站长技术!
1. 始终在 `v-for` 中使用 `:key` 在需要操纵数据时,将key属性与v-for指令一起...
1.小程序端代码示例 my.getPhoneNumber({ success: (res) = { let encryptedData...
mysql提供的模式匹配的其他类型是使用扩展正则表达式。 当你对这类模式进行匹配...
vscode怎么浏览器打开html预览?这里大家可以通过安装open in browser插件解决。...
PHP+Mysql简单实现了图书购物车 本文主要讲述如何通过PHP+HTML简单实现图书购物...
有许多命令行选手在linux下开发的时候会经常遇到一个问题,无论是svn还是git,提...
Java HashMap removeNode 方法 分析 源码分析仓库 https://github.com/HANXU2018...
步骤: 1、新建一个空文件,文件名为hhhh 2、初始化 git init 3、自己要与origin...
图片来自 Pexels 突然电话响了起来,一看是我们的一个开发同学,顿时紧张了起来...
官网连接 https://docs.rt-thread.org/#/rt-thread-version/rt-thread-standard/...