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 $(document).ready() 与window.onload的区别
Dec 28 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
javascript中new关键字详解
Dec 14 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
解决Vue项目中tff报错的问题
Oct 21 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
php中大括号作用介绍
2012/03/22 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
bootstrap table小案例
2016/10/21 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
js实现录音上传功能
2019/11/22 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
python操作gmail实例
2015/01/14 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
机电工程学生自荐信范文
2013/12/07 职场文书
经贸日语专业个人求职信范文
2013/12/28 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
学校春季防火方案
2014/06/08 职场文书
死者家属慰问信
2015/03/24 职场文书
找规律教学反思
2016/02/23 职场文书