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 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 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
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
2014年自我评价
2014/01/04 职场文书
班主任新年寄语
2014/04/04 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
六年级语文教学反思
2016/03/03 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server