vue修改Element的el-table样式的4种方法


Posted in Javascript onSeptember 17, 2020

修改Element中的el-table样式,可以使用以下几种方法:

1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。

2. cell-style 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。

3. header-row-style 表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style。

4. header-cell-style 表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。

示例代码如下:

<template>
  <div>
    <div style="width:700px;margin: 0 auto;">
    <el-table
      :data="tableData"
      height="300"
      border
      stripe="true"
      :row-style="tableRowStyle"
      :header-cell-style="tableHeaderColor"
      style="width: 100%">
      <el-table-column
        prop="tag"
        label="tag"
        width="150">
      </el-table-column>
      <el-table-column
        prop="confidence"
        label="confidence"
        width="180">
      </el-table-column>
      <el-table-column
        prop="category_tag_level"
        label="category_tag_level">
      </el-table-column>
    </el-table>
    </div>
  </div>
</template>
<script>

  export default{
    data () {
      return {
        tableData: [{
          tag: '体育',
          confidence: '0.8213628173213',
          category_tag_level: '123'
        }, {
          tag: '体育',
          confidence: '0.8213628173213',
          category_tag_level: '123'
        }, {
          tag: '体育',
          confidence: '0.8213628173213',
          category_tag_level: '123'
        }, {
          tag: '体育',
          confidence: '0.8213628173213',
          category_tag_level: '123'
        }, {
          tag: '体育',
          confidence: '0.8213628173213',
          category_tag_level: '123'
        }, {
          tag: '体育',
          confidence: '0.8213628173213',
          category_tag_level: '123'
        }, {
          tag: '体育',
          confidence: '0.8213628173213',
          category_tag_level: '123'
        }]

      }
    },
    methods:{
      //设置表格行的样式
      tableRowStyle({row,rowIndex}){
        return 'background-color:pink;font-size:15px;'
      },
      //设置表头行的样式
      tableHeaderColor({row,column,rowIndex,columnIndex}){
        return 'background-color:lightblue;color:#fff;font-wight:500;font-size:20px;text-align:center'

      }
    }
  }
</script>
<style>
</style>

效果如下所示:

vue修改Element的el-table样式的4种方法

以上就是vue修改Element的el-table样式的4种方法的详细内容,更多关于vue修改Element的el-table样式的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Javascript 二维数组
Nov 26 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 Javascript
vue+canvas实现拼图小游戏
Sep 18 #Javascript
JavaScript 常见的继承方式汇总
Sep 17 #Javascript
JavaScript 闭包的使用场景
Sep 17 #Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 #Javascript
js实现简单的随机点名器
Sep 17 #Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 #Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 #Javascript
You might like
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
python 消费 kafka 数据教程
2019/12/21 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
大众服装店创业计划书范文
2014/01/01 职场文书
美化环境标语
2014/06/20 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js