动态实现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 相关文章推荐
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
jQuery事件用法详解
Oct 06 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
原生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
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Python中扩展包的安装方法详解
2017/06/14 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
python实现取余操作的简单实例
2020/08/16 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
小学清明节活动方案
2014/03/08 职场文书
党员教师工作决心书
2014/03/13 职场文书
公司活动总结怎么写
2014/06/25 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python