利用element ui怎么实现在el-table显示不同样式的数据

发布时间:2021-01-22 14:49:49 作者:Leah
来源:亿速云 阅读:749

这期内容当中小编将会给大家带来有关利用element ui怎么实现在el-table显示不同样式的数据,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

实现方式一

效果图如下

利用element ui怎么实现在el-table显示不同样式的数据

代码如下

<template>
 <div id="app">
  <!-- 需求:三国人物表格,要求不同的国别展示不同的颜色(魏国红色、蜀国黑色、吴国蓝色) -->
  <el-table :data="tableData" >
   <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 == '魏国'" >{{scope.row.nation}}</div>
     <div v-if="scope.row.nation == '蜀国'" >{{scope.row.nation}}</div>
     <div v-if="scope.row.nation == '吴国'" >{{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 动态绑定样式来实现,不仅可以简洁代码,而且可以实现更加丰富的效果。如下:

实现方式二

效果图如下

利用element ui怎么实现在el-table显示不同样式的数据

代码如下

<template>
 <div id="app">
  <!-- 需求:三国人物表格,要求不同的国别展示不同的颜色(魏国红色、蜀国黑色、吴国蓝色) -->
  <el-table :data="tableData" >
   <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 :>{{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

利用element ui怎么实现在el-table显示不同样式的数据

方式二总结
这种通过vue绑定样式来控制,比第一种方式,灵活很多。毕竟第一种方式是写在el-table里面,第二种方式是写在methods方法里面。具体用那种,看场景需求。

上述就是小编为大家分享的利用element ui怎么实现在el-table显示不同样式的数据了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. Element-UI如何使用
  2. 如何实现element-ui表格中勾选checkbox高亮当前行效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

element el-table

上一篇:java中迭代器与for循环的优劣势有哪些

下一篇:如何在MySQL中使用DATE_ADD和ADDDATE函数向日期添加指定的时间间隔

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》