Element-UI中关于table表格的那些骚操作(小结)


Posted in Javascript onAugust 15, 2019

最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比较简略,这里简单整理下一些常用的操作,如果有类似的功能可以做一个参考。

具体的使用方法还是建议仔细阅读官网-table章节:

https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-slot

该项目demo已上传github,欢迎大家下载:

# 克隆到本地
git clone git@github.com:Hanxueqing/Element-table.git

# 安装依赖
npm install

# 开启本地服务器localhost
npm run dev

项目地址:

https://github.com/Hanxueqing/Element-table

自定义列的内容

需求:在表格最后一栏添加操作按钮

Element-UI中关于table表格的那些骚操作(小结)

通过slot-scope="scope"添加操作按钮,这是专门为我们提供的插槽,方便自定义添加不同的内容。

<template slot-scope="scope">
    <el-button size="mini" type="primary">编辑</el-button>
    <el-button size="mini" type="danger">删除</el-button>
   </template>
   </el-table-column>

Element-UI中关于table表格的那些骚操作(小结) 

scope.$index 获取当前行下标

添加进来的操作按钮可以通过scope.$index可以获取当前行对应的下标

<el-table-column label="操作" width="160">
   <template slot-scope="scope">
    <el-button size="mini" type="primary" plain @click = "showIndex(scope.$index)">点击显示当前行下标</el-button>
   </template>
   </el-table-column>

根据下标可以对指定某一行进行操作

Element-UI中关于table表格的那些骚操作(小结)

scope.row 获取当前属性值

通过scope.row.属性名可以获取当前行对应的属性值

<el-table-column label="操作" width="160">
   <template slot-scope="scope">
    <el-button size="mini" type="primary" plain @click = "showName(scope.row.name)">点击获取姓名属性</el-button>
   </template>
   </el-table-column>

点击按钮获得当前行的name属性值

Element-UI中关于table表格的那些骚操作(小结)

可以通过scope.row.属性名和三目运算符给特殊的属性值设定样式

<el-table-column prop="name" :label="langConfig.table.name[lang]" width="200">
   <template slot-scope="scope">
    <div :class="scope.row.name === '王大虎' ? 'specialColor':''">{{scope.row.name}}</div>
   </template>
   </el-table-column>

编写specialColor样式,将字体颜色设置为红色

.specialColor{
 color:red;
 }

设置表头样式

需求:将表头样式改为背景色蓝色,字体颜色白色,字重400

Element-UI中关于table表格的那些骚操作(小结)

header-cell-class-name

说明:表头单元格的 className 的回调方法,也可以使用字符串为所有表头单元格设置一个固定的 className。

类型:Function({row, column, rowIndex, columnIndex})/String

函数形式:将headerStyle方法传递给header-cell-class-name

<el-table 
   :data="tableData[lang]" 
   class="table" 
   stripe 
   border 
   :header-cell-class-name="headerStyle"
  >

编写headerStyle,返回class名称tableStyle

headerStyle ({row, column, rowIndex, columnIndex}) {
  return 'tableStyle'
  }

在style中编写tableStyle样式

<style lang = "scss">
 .tableStyle{
 background-color: #1989fa!important;
 color:#fff;
 font-weight:400;
 }
</style>

字符串形式:直接将tableStyle名称赋值给header-cell-class-name

<el-table 
   :data="tableData[lang]" 
   class="table" 
   stripe 
   border 
   header-cell-class-name="tableStyle"
  >

header-cell-style

说明:表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。

类型:Function({row, column, rowIndex, columnIndex})/Object

函数形式:将tableHeaderStyle方法传递给header-cell-style

<el-table 
   :data="tableData[lang]" 
   class="table" 
   stripe 
   border 
   :header-cell-style='tableHeaderStyle'
  >

编写tableHeaderStyle方法,返回样式

tableHeaderStyle ({row, column, rowIndex, columnIndex}) {
  return 'background-color:#1989fa;color:#fff;font-weight:400;'
  }

对象形式:直接在对象中编写样式

<el-table 
   :data="tableData[lang]" 
   class="table" 
   stripe 
   border 
   :header-cell-style="{
   'background-color': '#1989fa',
   'color': '#fff',
   'font-weight': '400'
  }">

header-row-class-name

说明:表头行的className 的回调方法,也可以使用字符串为所有表头行设置一个固定的 className。

类型:Function({row, rowIndex})/String

使用方式与header-cell-class-name类似

注意:header-row-class-name与header-cell-class-name的区别:

header-row-class-name是添加在tr上面的,header-cell-class-name是添加在th上面的。

header-row-class-name:

Element-UI中关于table表格的那些骚操作(小结)

所以想让添加在tr上的样式显示,需要关闭element-ui中原本的th的样式,否则会被覆盖!(例如背景色)

Element-UI中关于table表格的那些骚操作(小结)

header-cell-class-name:

Element-UI中关于table表格的那些骚操作(小结)

header-row-style

说明:表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style。

类型:Function({row, rowIndex})/Object

使用方式与header-cell-style类似

设置行样式

需求:将表格中行的背景色设置为浅蓝色

Element-UI中关于table表格的那些骚操作(小结)

row-class-name

说明:行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。

类型:Function({row, rowIndex})/String

使用方式与header-cell-class-name类似

row-style

说明:行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。

类型:Function({row, rowIndex})/Object

使用方式与header-cell-style类似

函数形式:将tableRowStyle方法传给row-style

<el-table 
   :data="tableData[lang]" 
   class="table" 
   border 
   :row-style="tableRowStyle"
  >

编写tableRowStyle方法,返回样式

// 修改table tr行的背景色
  tableRowStyle ({ row, rowIndex }) {
  return 'background-color:#ecf5ff'
  }

点击按钮操作当前行

需求:点击操作栏的按钮,切换按钮状态,并且将当前行置灰

Element-UI中关于table表格的那些骚操作(小结)

通过slot-scope添加按钮

<el-table-column label="操作" width="160">
   <template slot-scope="scope">
    <el-button size="mini" type="danger" plain v-if = "scope.row.buttonVisible" @click = "changeTable(scope.row.buttonVisible,scope.$index)">禁用该行</el-button>
    <el-button size="mini" type="primary" plain v-else @click = "changeTable(scope.row.buttonVisible,scope.$index)">启用该行</el-button>
   </template>
   </el-table-column>

在每一个data中添加buttonVisible字段,使用v-if/v-else指令实现按钮的显示与隐藏

{
   date: '2016-05-10',
   name: '王大虎',
   address: '上海市普陀区金沙江路 1518 弄',
   zip: 200333,
   buttonVisible: true
  }

编写changeTable方法,点击按钮的时候更改buttonVisible的值

changeTable (buttonVisible, index) {
  this.tableData[index].buttonVisible = !buttonVisible
  }

给el-table添加row-style,并且将tableRowStyle方法传递给row-style

<el-table 
   :data="tableData" 
   class="table" 
   border 
   :row-style="tableRowStyle"
  >

编写tableRowStyle方法,根据每一行buttonVisible的值设置背景色

// 修改table tr行的背景色
  tableRowStyle ({ row, rowIndex }) {
  if (this.tableData[rowIndex].buttonVisible === false) {
   return 'background-color: rgba(243,243,243,1)'
  }
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 #Javascript
js设计模式之单例模式原理与用法详解
Aug 15 #Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 #Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 #Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 #Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 #Javascript
vue的keep-alive用法技巧
Aug 15 #Javascript
You might like
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
Why do we need Unit test
2013/01/03 面试题
出纳岗位职责
2013/11/09 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
小学生手册家长评语
2014/04/16 职场文书
企业介绍信范文
2015/01/30 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
国博复兴之路观后感
2015/06/02 职场文书
TypeScript 内置高级类型编程示例
2022/09/23 Javascript