在Element UI中表格根据数据动态变化显示表格的内容
需求
对于Element UI里的表格,如果假设传入data的数据为数字(事实上其他的字母之类的也可)代表为表格的一些固定选项,而不是直接传入字符串,怎样实现替换。比如对于某个表格的选项,传入的数据用0表示否,1表示是这样的固定选项,而在el-table-column常用的方式是用prop规定数据属性传入数据,那么在表格里只能显示出来0或1的数字,达不到我们的需求。
首先对于需求我们想到的方式是用v-if来设定判定条件,在el-table-column里写两个span来解决问题,一个直接数据显示为是,另一个为否,然后通过需要传入的数据来直接v-if判定切换。
很明显该方法对于变化量较小的数据可以使用,甚至可对付几种数据对应结果的方式。但是即使在不考虑vue中v-if反复的重新渲染占用资源的情况下,所有情况全部复制修改一遍也着实显得异常麻烦。
这种方法是我之前一直使用的方法:但是后面发现数据多复杂的时候是使用v-if是不太好完成
在这里我使用以下几种方法:
在介绍方法之前需要补充一个知识点,我们需要了解find()方法
一:概念
find()方法用于查找数组中符合条件的第一个元素,如果没有符合条件的元素,则返回undefined
注意:
find() 对于空数组,函数是不会执行的。
find() 并没有改变数组的原始值。
实例1:
let arr1 = [1, 2, 3, 4, 5];
let num = arr1.find(item => item > 1);
console.log(num) //輸出的結果是2
实例2:var arr = [{id: 1,name: '张一',age: 25,class: '一班'}, {id: 1,name: '张二',age: 25,class: '二班'}, {id: 2,name: '张三',age: 25,class: '三班'}]let obj = arr.find(item => item.id == 1)console.log(obj); // 结果:{id: 1, name: '张一', age: 25, class: '一班'}
当我们想自定义表格列表的内容时,可以使用格式化,表格列的一个属性 :formatter
它用于格式化指定列的值,接受一个Function,会传入参数:row和column,cellValue(当前表格的数据),index可以根据自己的需求进行处理。
formatter |
用来格式化内容 |
Function(row, column, cellValue, index) |
<el-table:data="tableData"style="width: 100%"border><el-table-columnprop="formOfEmployment"label="聘用形式"sortablealign="center":formatter="formatterEmployment"/><el-table-columnprop="departmentName"label="部门"sortablealign="center"/><el-table-columnprop="timeOfEntry"label="入职时间"sortablewidth="220"align="center"/><el-table-columnprop="enableState"label="账户状态"sortablealign="center"><template slot-scope="scope"><el-switch:value="scope.row.enableState===1"active-color="#13ce66"inactive-color="#ff4949"/></template></el-table-column></el-table>
其中employees.js的文件里面的内容是// 聘用形式hireType: [{id: 1,value: '正式'},{id: 2,value: '非正式'}],
<script>
import EmployeeEnum from '@/api/constant/employees'
export default {methods:{// 格式化聘用形式formatterEmployment(row, column, cellValue) {// cellValue是表格当前的数据 如我表格当前的数据是 1和2 或者是什么都没有const obj = EmployeeEnum.hireType.find(item => item.id === cellValue)//EmployeeEnum是引入employees.js的名字console.log('格式', obj) // 能找到 或者找不到(undefined)// console.log(row, column, cellValue)return obj ? obj.value : '未知'},}
}
</script>
经过这样的操作处理:得到的效果如下
而没有格式化之前是:
除了使用 :formatter属性对表格列的内容进行格式化,还有其他方法能改变表格列表的内容
比如这个还有另外一种写法:
<el-table :data="tableData">
<el-table-column label="退款类型" width="80"><template slot-scope="scope"><span>{{ scope.row.type == 1? "仅退款": scope.row.type == 2 ? "仅换货" : "退货退款"}}</span></template></el-table-column>
</el-table>而 后端返回的 type 售后类型: 1:仅退款 2:仅换货 3:退货退款
效果图如下:
我们对开关的做法是,在 <el-table-column>中插入<template>标签,其中使用插槽
slot-scope 然后来获取动态数据
<el-table-columnprop="enableState"label="账户状态"sortablealign="center"><template slot-scope="scope"><el-switch:value="scope.row.enableState===1"active-color="#13ce66"inactive-color="#ff4949"/></template>
</el-table-column>
然后对于时间的格式化我是在获取后台的数据后,先对时间进行转换,然后再把转化后的时间赋值给tableData
在Element UI中表格根据数据动态变化显示表格的内容相关推荐
- 前端笔记-在Element UI中表格如何根据数据动态变化显示
前言 实际上我需要的功能类似于前端工程中的字典.由于在前端的学习自己写代码的过程中可能不会对一个项目工程化的如此的彻底,所以这里给出了一种解决方法. 需求 对于Element UI里的表格,如果假设传 ...
- element ui中穿梭框等列表文字显示过长隐藏问题处理
主要记录一下element ui组件中穿梭框.table列表内容显示不全解决方式 对于Transfer 穿梭框中的文字过长隐藏问题处理: 1.实现效果: 解决方式; 1. <el-row :gu ...
- 使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格 上一篇: MongoDB 聚合 下一篇: vue router 路由守卫 登录验证 https://github.com/SheetJS ...
- Web前端笔记-修改element ui中表格样式(透明、去横纵线等含修改思路)
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
- Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- Element UI中Steps 步骤条description描述换行展示
突然要求加了个显示字段,之前的代码只能显示一行,于是乎找到了解决办法,代码如下:其中的属性自行到官网查看释义吧:Element UI官网传送门 <el-table><!-- 可展开的 ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- element ui 中 el-checkbox-group 点击一个全部选中的问题
element ui 中 el-checkbox-group 点击一个全部选中的问题 原因是:checkbox-group中的v-modle要单独一个数组对象,不能作为表单对象,ruleForm中的一 ...
最新文章
- angular-oauth2 —— NG 的 OAuth2 认证模块
- 【PTA 天梯赛】L2-1 分而治之(结构体存边)
- 广东发展银行系统分析师面试问题
- LSMW批处理使用方法(02)_步骤1
- c语言怎么在编码时改变颜色,怎么给贪吃蛇换一个颜色 怎么改 代码如下
- 20个软件开发常用设计文档大全下载
- php 服务器监控源码,PHP自动Get监控源码
- 电子计算机的两个重要改进是,1946年,冯.诺依曼在研制EDVAC计算机时,提出的两个重要改进是什么?...
- 孤独是人成熟的必经之路
- 循环时尚是消费者与电商平台的一场“双向奔赴”?
- JAVA 将一个对象的所有字段值 赋给另一个 对象
- 苹果电脑App Store下载失败
- 云服务器BCC实例重装系统的操作步骤
- Jumping NLP Curves: A review of NLP research (翻译)
- kotlin读取文件算法
- 为了追学姐,用python把她的照片做成了游戏,她看了...
- HaaS EDU物联网项目实战:微信小程序实现云养花
- Linux命令之nslookup
- 实现对 2:3 或者3:2的图片进行1:1裁剪
- 无需下载 网页版 Matlab
热门文章
- 洛谷P1526 智破连环阵
- C语言计算身体质量质数BMI,Python需如何计算身体质量指数BMI从而来判断体型
- Excel隔行插入空白行
- python xlrd使用_在Python中使用xlrd以文本形式读取数值Excel数据
- android 耗电分析工具,使用Battery Historian工具分析Android耗电分析
- 错误:类 SubClass 是公共的, 应在名为 SubClass.java 的文件中声明
- PHPMyWind后台登录密码忘记的解决办法
- JAVA联机版五子棋——源码(一个类一个main暴力开发)
- hihocoder#1369 : 网络流算法的一些小结
- LaTeX报错解决办法:arithmetic: number too big ! Dimension too large.