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

 更新时间:2021年01月22日 09:06:47   作者:水冗水孚  
这篇文章主要介绍了动态实现element ui的el-table某列数据不同样式的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

问题描述

在饿了么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某列数据不同样式的示例内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue函数式组件的应用实例详解

    Vue函数式组件的应用实例详解

    这篇文章主要介绍了Vue函数式组件的应用实例详解,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • Vue启动失败报错:Module not found: Error: Can‘t resolve 'less-loader'解决

    Vue启动失败报错:Module not found: Error: Can‘t resolve &apos

    这篇文章主要给大家介绍了关于Vue启动失败报错:Module not found: Error: Can‘t resolve 'less-loader'解决的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue中input标签上传本地文件或图片后获取完整路径的解决方法

    vue中input标签上传本地文件或图片后获取完整路径的解决方法

    本文给大家介绍vue中input标签上传本地文件或图片后获取完整路径,如E:\medicineOfCH\stageImage\xxx.jpg,本文给大家分享完美解决方案,感兴趣的朋友跟随小编一起看看吧
    2023-04-04
  • 使用vue-cli导入Element UI组件的方法

    使用vue-cli导入Element UI组件的方法

    这篇文章给大家介绍了使用vue-cli导入Element UI组件的方法,非常不错,具有一定的参考借鉴价值,需要的朋友一起看看吧
    2018-05-05
  • Vue之Watcher源码解析(2)

    Vue之Watcher源码解析(2)

    这篇文章主要为大家详细介绍了Vue源码之Watcher的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue中对象数组去重的实现

    vue中对象数组去重的实现

    这篇文章主要介绍了vue中对象数组去重的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • vue项目中axios如何捕捉http状态码为401错误问题

    vue项目中axios如何捕捉http状态码为401错误问题

    这篇文章主要介绍了vue项目中axios如何捕捉http状态码为401错误问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue excel上传预览和table内容下载到excel文件中

    vue excel上传预览和table内容下载到excel文件中

    这篇文章主要介绍了vue excel上传预览和table内容下载到excel文件中,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • 详解Vue如何监测数组的变化

    详解Vue如何监测数组的变化

    在 Vue 中,如果直接对数组进行操作,比如使用下标直接修改元素,数组长度不变时, Vue 是无法监测到这种变化的,导致无法触发视图更新。针对该问题本文为大家整理了一些方法,需要的可以参考一下
    2023-01-01
  • 浅谈Vue3 父子传值

    浅谈Vue3 父子传值

    这篇文章主要介绍了基于Vue中的父子传值问题解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-10-10

最新评论