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


Posted in Javascript onJanuary 22, 2021

问题描述

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

实现方式一

效果图如下

动态实现element ui的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 动态绑定样式来实现,不仅可以简洁代码,而且可以实现更加丰富的效果。如下:

实现方式二

效果图如下

动态实现element ui的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"> 
    <!-- 思路通过模板插槽,获取对应的数据,通过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

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

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

到此这篇关于动态实现element ui的el-table某列数据不同样式的示例的文章就介绍到这了,更多相关动态实现element ui的el-table某列数据不同样式的示例内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
固定背景实现的背景滚动特效示例分享
May 19 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
微信小程序实现上传图片功能
May 28 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
原生js实现放大镜组件
Jan 22 #Javascript
Vue仿Bibibili首页的问题
Jan 21 #Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 #Vue.js
Vue看了就会的8个小技巧
Jan 21 #Vue.js
原生js实现滑块区间组件
Jan 20 #Javascript
原生js实现下拉框选择组件
Jan 20 #Javascript
原生js实现自定义滚动条组件
Jan 20 #Javascript
You might like
Terran热键控制
2020/03/14 星际争霸
PHP新手入门学习方法
2011/05/08 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
angular多语言配置详解
2019/05/16 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
初级Java程序员面试题
2016/03/03 面试题
面试必备的求职信
2014/05/25 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
办公室禁烟通知
2015/04/23 职场文书
劳动模范获奖感言
2015/07/31 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书