• 售前

  • 售后

热门帖子
入门百科

动态实现element ui的el-table某列数据差别样式的示例

[复制链接]
下一站美安好 显示全部楼层 发表于 2021-10-25 19:56:02 |阅读模式 打印 上一主题 下一主题
题目描述


在饿了么ui的框架中,输入数据el-form,输出数据el-table。偶然候产物想让枯燥的表格来点动态的样式,比如差别的内容展示差别的样式,对于这个需求,着实方式有很多种,本文罗列两种,以供参考。
实现方式一


结果图如下


代码如下
  1. <template>
  2. <div id="app">
  3.   <!-- 需求:三国人物表格,要求不同的国别展示不同的颜色(魏国红色、蜀国黑色、吴国蓝色) -->
  4.   <el-table :data="tableData" style="width: 100%">
  5.    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
  6.    <el-table-column prop="nation" label="国别" width="180">
  7.     <!-- 思路通过模板插槽,获取对应的数据,不同的数据展示不同的颜色,当然只能让显示一个(通过v-if控制) -->
  8.     <template scope="scope">
  9.      <div v-if="scope.row.nation == '魏国'" style="color:red;font-weight:bold;">{{scope.row.nation}}</div>
  10.      <div v-if="scope.row.nation == '蜀国'" style="color:black;font-weight:bold;">{{scope.row.nation}}</div>
  11.      <div v-if="scope.row.nation == '吴国'" style="color:blue;font-weight:bold;">{{scope.row.nation}}</div>
  12.     </template>
  13.    </el-table-column>
  14.    <el-table-column prop="bornPlace" label="出生地方"> </el-table-column>
  15.   </el-table>
  16. </div>
  17. </template>
  18. <script>
  19. export default {
  20. name: "app",
  21. data() {
  22.   return {
  23.    tableData: [
  24.     {
  25.      name: "刘备",
  26.      nation: "蜀国",
  27.      bornPlace: "涿郡涿县(河北省涿州市)",
  28.     },
  29.     {
  30.      name: "曹操",
  31.      nation: "魏国",
  32.      bornPlace: "沛国谯县(安徽省亳州市)",
  33.     },
  34.     {
  35.      name: "孙权",
  36.      nation: "吴国",
  37.      bornPlace: "吴郡富春县(浙江省杭州市富阳区)",
  38.     },
  39.     {
  40.      name: "关羽",
  41.      nation: "蜀国",
  42.      bornPlace: "河东郡解县(山西省运城市盐湖区解州镇)",
  43.     },
  44.    ],
  45.   };
  46. },
  47. };
  48. </script>
复制代码
方式一总结
这个第一种方式,虽然能实现结果,但是代码都写在el-table内里了,看起来比较痴肥,假如只要求动态展示两三种样式的话,还可以写,但是假如有七八种乃至更多样式动态展示,这种写法就会非常痴肥,且后期不太好维护。我个人推荐第二种方式,就是利用vue自带的 :style 动态绑定样式来实现,不但可以简洁代码,而且可以实现更加丰富的结果。如下:
实现方式二


结果图如下


代码如下
  1. <template>
  2. <div id="app">
  3.   <!-- 需求:三国人物表格,要求不同的国别展示不同的颜色(魏国红色、蜀国黑色、吴国蓝色) -->
  4.   <el-table :data="tableData" style="width: 100%">
  5.    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
  6.    <el-table-column prop="nation" label="国别" width="180">
  7.     <!-- 思路通过模板插槽,获取对应的数据,通过vue动态style的方法,动态显示不同的颜色,这种方式更加灵活 -->
  8.     <template scope="scope">
  9.      <!-- 意思是:给这个div绑定动态样式,颜色color的属性值为getColorByNation()这个方法的返回值,所以只需要通过传过去的scope 对方法的返回值做动态设置即可 -->
  10.      <div :style="{color:getColorByNation(scope),fontSize:getSizeByNation(scope),fontWeight:'bold'}">{{scope.row.nation}}</div>
  11.     </template>
  12.    </el-table-column>
  13.    <el-table-column prop="bornPlace" label="出生地方"> </el-table-column>
  14.   </el-table>
  15. </div>
  16. </template>
  17. <script>
  18. export default {
  19. name: "app",
  20. data() {
  21.   return {
  22.    tableData: [
  23.     {
  24.      name: "刘备",
  25.      nation: "蜀国",
  26.      bornPlace: "涿郡涿县(河北省涿州市)",
  27.     },
  28.     {
  29.      name: "曹操",
  30.      nation: "魏国",
  31.      bornPlace: "沛国谯县(安徽省亳州市)",
  32.     },
  33.     {
  34.      name: "孙权",
  35.      nation: "吴国",
  36.      bornPlace: "吴郡富春县(浙江省杭州市富阳区)",
  37.     },
  38.     {
  39.      name: "关羽",
  40.      nation: "蜀国",
  41.      bornPlace: "河东郡解县(山西省运城市盐湖区解州镇)",
  42.     },
  43.    ],
  44.   };
  45. },
  46. methods: {
  47.   // 动态设置颜色
  48.   getColorByNation(scope){
  49.    console.log(scope); // 打印一下传过来的scope是对应表格不同行的整行的数据,如下有图片:
  50.    if(scope.row.nation == "魏国"){
  51.     return "red"
  52.    }else if(scope.row.nation == "蜀国"){
  53.     return "black"
  54.    }else if(scope.row.nation == "吴国"){
  55.     return "blue"
  56.    }
  57.   },
  58.   // 动态设置字体大小
  59.   getSizeByNation(scope){
  60.    if(scope.row.nation == "魏国"){
  61.     return "14px"
  62.    }else if(scope.row.nation == "蜀国"){
  63.     return "18px"
  64.    }else if(scope.row.nation == "吴国"){
  65.     return "24px"
  66.    }
  67.   }
  68. },
  69. };
  70. </script>
复制代码
打印传已往的scope


方式二总结
这种通过vue绑定样式来控制,比第一种方式,机动很多。究竟第一种方式是写在el-table内里,第二种方式是写在methods方法内里。详细用那种,看场景需求。
到此这篇关于动态实现element ui的el-table某列数据差别样式的示例的文章就先容到这了,更多干系动态实现element ui的el-table某列数据差别样式的示例内容请搜刮草根技术分享以前的文章或继续欣赏下面的干系文章希望各人以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作