前端笔记-在Element UI中表格如何根据数据动态变化显示

前言

实际上我需要的功能类似于前端工程中的字典。由于在前端的学习自己写代码的过程中可能不会对一个项目工程化的如此的彻底，所以这里给出了一种解决方法。

需求

对于Element UI里的表格，如果假设传入data的数据为数字（事实上其他的字母之类的也可）代表为表格的一些固定选项，而不是直接传入字符串，怎样实现替换。比如对于某个表格的选项，传入的数据用0表示否，1表示是这样的固定选项，而在el-table-column常用的方式是用prop规定数据属性传入数据，那么在表格里只能显示出来0或1的数字，达不到我们的需求。

解决方式

首先对于需求我们想到的方式是用v-if来设定判定条件，在el-table-column里写两个span来解决问题，一个直接数据显示为是，另一个为否，然后通过需要传入的数据来直接v-if判定切换。
很明显该方法对于变化量较小的数据可以使用，甚至可对付几种数据对应结果的方式。但是即使在不考虑vue中v-if反复的重新渲染占用资源的情况下，所有情况全部复制修改一遍也着实显得异常麻烦。那么这里我们可以尝试这种方式：

 <el-table-columnlabel="选择是否"align="center"><template scope="scope"><span>{{[ "是", "否" ][scope.row.is]}} </span></template>
</el-table-column>

这里实际上是利用了js原生语言里的对于**[]**这一运算符的使用。它作为数组相关的运算符，还具有取数组值的方法。那么对于这句

<span>{{[ "是", "否" ][scope.row.is]}} </span>

实际上就是对前面定义的数组通过后面的中括号[]运算符运算符取值，你传入的scope.row.is就是要取的下标值，那么对于0对应否，1对应是的需求就解决了，对于多种对应的需求也是同理。事实上这种方法还可以推广至传入数据下标不是从0开始的对应方式。

对于第二种方式，如果我传入的是类似于长串的数据（比如202101，202102）或者选择的字符（‘A’,‘B’,‘C’),又该如何拓展呢。可以尝试这个写法：

 <el-table-columnlabel="学期"sortablealign="center"><template scope="scope"><span>{{({20211:"2021年春季学期1",20212:"2021年春季学期2",20213:"2021年秋季学期1",20214:"2021年秋季学期2",}[scope.row.term])}}</span></template></el-table-column>

对于字符也是同理：

<span>{{({'A':"2021年春季学期1",'B':"2021年春季学期2",'C':"2021年秋季学期1",'D':"2021年秋季学期2",}[scope.row.term])}}</span>

原理同上，实际上也是取数组里的值。

前端笔记-在Element UI中表格如何根据数据动态变化显示相关推荐

Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
在Element UI中表格根据数据动态变化显示表格的内容
需求对于Element UI里的表格,如果假设传入data的数据为数字(事实上其他的字母之类的也可)代表为表格的一些固定选项,而不是直接传入字符串,怎样实现替换.比如对于某个表格的选项,传入的数据用 ...
Element ui 中的tree 在数据前面添加自定义图标
可以使用 el-tree 标签实现在节点区添加按钮或图标等内容也可以通过class来自定义图标 <template><div class="my-tree-main&q ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格上一篇: MongoDB 聚合下一篇: vue router 路由守卫登录验证 https://github.com/SheetJS ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...

前端笔记-在Element UI中表格如何根据数据动态变化显示

前言

需求

解决方式

前端笔记-在Element UI中表格如何根据数据动态变化显示相关推荐

最新文章

热门文章