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

最近的项目中使用到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

自定义列的内容

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

通过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>

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>

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

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属性值

可以通过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

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:

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

header-cell-class-name:

header-row-style

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

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

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

设置行样式

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

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'
  }

点击按钮操作当前行

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

通过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)'
  }
  }

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

(0)

相关推荐

  • vue大数据表格卡顿问题的完美解决方案

    前言 vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 点我在线体验Demo(请用电脑查看) 亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系统和浏览器,方便我后续优化,谢谢 先看一下效果,一共1000 X 100 = 10W个单元格基本感受不到卡顿,而且每个单元格点击可以编辑,支持固定头和固定列 项目源代码地址 Github (本地下载) 解决问题核心点:横向滚动加载,竖向滚动加载 项目背景 笔者最

  • element-ui 中的table的列隐藏问题解决

    element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条还有一段距离.所以希望能够切换到简短列可以方便的看见比较重要的几列的内容.用之前的方法<bootstrap>的话,非常简单,直接设置display的显示和隐藏就可以了. 但是放在element-ui中来就不可行了.每一列根本不能直接设置样式,你给每一列设置class-name从而设置样式的话,可能

  • 解决vue 表格table列求和的问题

    最近在给朋友做一个项目,因为是B端,所以少不了表格. 本身就用了element-ui,但是订单管理有个需求使用element-ui table组件实现不了,只能退而求其之用了原生的table,功能是几乎满足需求了,但是还有个小问题就是列求和没搞定,这可咋整啊.看了element-ui是有这么个功能,遂翻开源码看了下也没看出啥话头,心想算了,自己来实现,网上搜了下,偶然看到一位仁兄的写法,拿过来稍微修改了下,果真是有用,在此感谢那位仁兄!(我本身对前端不专业,侧后端) 下面贴代码: /** jav

  • elementUI中Table表格问题的解决方法

    前言 element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. 在开发vue框架项目时,引入element插件,使用table表格组件时,遇到了一些问题,以下列出以供参考. 1.表格样式问题: 混乱样式.png 正常样式.png 如上图,在当前导航表格table样式是没问题的,但当我点击别的导航去到另外的页面,然后再回到之前的导航页面,表格table的样式就会混乱,随便点击当前页面或刷新亦或拉伸页面,样式又恢复正常,很奇怪的样式问题.

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

    最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比较简略,这里简单整理下一些常用的操作,如果有类似的功能可以做一个参考. 具体的使用方法还是建议仔细阅读官网-table章节: https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-s

  • Element UI中table单元格合并的解决过程

    目录 引言 解决思路: 1.格式化后台返回的数据(根据实际数据格式处理) 2.在 data 中定义数据,需要合并几列就定义几个数组和索引 3.定义合并函数 4.table 组件属性 span-method 的单元格合并方法: 完整代码: 总结 引言 项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 table 组件的 span-method 属性.

  • vue2.0 + element UI 中 el-table 数据导出Excel的方法

    1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel

  • Web Components实现类Element UI中的Card卡片

    目录 引言 Web Components 核心组成 1. Custom Elements 2. Shadow DOM 3. templates 和 slots 完整代码 Web Components vs Vue Components Web Components 生命周期回调函数 优点 and 缺点 七.基于web components的框架 引言 Web Components 是一个浏览器原生支持的组件化方案,允许你创建新的自定义.可封装.可重用的HTML 标记.不用加载任何外部模块,直接就

  • element UI 中的 el-tree 实现 checkbox 单选框及 bus 传递参数功能

    el-tree 单选功能 在日常项目开发中,会经常遇到,树形结构的查询方式,为了快速方便开发,常常会使用到快捷的ui组件去快速搭树形结构,这里我用的是 element ui 中的 el-tree .第一次接触这种功能的时候也是各种网站查询,虽然也都能实现功能,但是都会有一些小问题,就很难受,那么我们废话不多说(好像也说了不少呢),直接上效果. el-tree 单选 html 代码 *** 注: load 和 lazy 属性不是需要的粘贴时请删除.(只有需要懒加载的树才需要,关于怎样构建懒加载树以

  • 关于element ui中el-cascader的使用方式

    目录 element ui中el-cascader使用 例→ 代码 element中el-cascader使用及自定义key名 element ui中el-cascader使用 要想实现进入页面直接选中选择器中的选项 例→ 那v-model绑定的值必须是数组形式的!!(element ui官方文档中没提到这一点好像,我也是试了很多次才发现的) 代码 <el-form-item label="分类:" prop="region" class="regi

  • element UI中在 el-select 与 el-tree 结合组件实现过程

    前言 项目上实现某个功能,使用到了 el-select 和 el-tree 组合实现,记录下两者结合的实现过程. 要求根据项目接口提供的数据,el-tree 里的数据是一次性返回来的,点击最后一层级时,请求接口,在点击层级下方追加数据追加的数据要显示勾选框,可进行勾选,且是单选勾选后需要返回勾选的层级以及它的父级 实现效果如下: 数据回显效果: 实现关键部分 el-tree里的显示勾选框不符合当前“追加的数据要显示勾选框,可进行勾选”这个需求,所以我修改了el-tree的源码进行使用. 追加子级

  • Element UI中v-infinite-scroll无限滚动组件使用详解

    目录 一.v-infinite-scroll无限滚动组件使用详解 二.组件无限加载原因及解决方式 三.总结 总结 一.v-infinite-scroll无限滚动组件使用详解 1.v-infinite-scroll="load" //load无限滚动加载的方法 2.infinite-scroll-disabled //是否禁用无限滚动加载 3.infinite-scroll-delay //节流时延,单位为ms 4.infinite-scroll-distance //触发加载的距离阈值

  • Vue+Element ui 根据后台返回数据设置动态表头操作

    由于后端是多人开发,也没有规范数据格式,所有页面是我一个人开发,所以就会遇到同样的页面不同的返回数据格式问题. 一.根据element文档,利用prop属性绑定对应值,label绑定表头. html <el-table class="tb-edit" highlight-current-row :data="tableData" border style="width: 100%"> <template v-for="

  • Vue+Element UI+Lumen实现通用表格分页功能

    前言 最近在做一个前后端分离的项目,前端使用 Vue+ Element UI,而后端则使用 Lumen 做接口开发,其中分页是必不可少的一部分,本文就介绍如何基于以上环境做一个简单.可复用的分页功能. 先说后端 后端做的事情不多,只需要接受几个参数,根据参数来获取数据即可. 需要获取的参数如下: pageSize(一页数据的数量) pageIndex(第几页的数据) 然后就可以根据这两个参数计算出偏移量,再从数据库中取出相应的数据. 假如现在给出的参数为:pageSize=10,pageInde

随机推荐