element ui 动态表格,elementui动态表单
最近有一个项目，通过选择不同的查询指标来显示不同的表格，所以本文介绍按元素实现动态表格。具体实现代码记录如下，有兴趣的可以看看。
目录
【代码背景】【代码实现】# 1 #-代码复用的基础是你需要一个可复用的组件# 2 #-在显示页面上使用动态表组件# 3 #-如何根据需求动态添加序号列/索引列到动态表中
【代码背景】
有这样一个业务需求场景，大概有十几个表属于某个类别。用户希望通过选择不同的查询指标在同一页面上显示不同的表。这些表格的标题样式相似，但不完全相同。他们应该怎么做？
到目前为止，所有基于元素UI的表格样式都是直接写在页面上的，和官方的一样：
El-table:data= table data style= width:100%
El-table-column prop= date label= date width= 180 /El-table-column
El-table-column prop= name label= name width= 180 /El-table-column
El-表格列属性=地址标签=地址/El-表格列
/el-table
要解决上述问题，最简单也是最暴力的方法就是为每个表单独编写一个组件，然后通过选择框触发一个事件来切换不同的组件来路由呈现的页面。当然，这种方式很愚蠢，不符合代码复用的基本原则。于是，为了偷懒，为了坚持代码复用的基本原则，我开始思考是否有更好的方法来解决这个问题。
仔细看这张电子表格。表格数据由：data绑定，表头数据由el-table-column标签显示。表头数据是否也可以结合v-for通过某种传递参数的方式来渲染el-table-column的具体数据？在度娘的帮助下，果然有大佬已经做到了这一点，实现了动态形式，参考链接被挂在了最下面。在此，感谢免费分享知识的大佬们。知识无价，学无止境。
现在将这个项目的具体实现代码记录如下，并完善了一些代码注释，试图帮助理解。
【代码实现】
#1# - 代码复用的基础是你需要一个可复用的组件
在/components/Table文件夹下创建两个新组件。
动态可探测的
模板
！-动态显示表单-
El-table:data= table data border stripe:height= height @ row-click= handlerow click
！-V-用于循环提取标题数据-
模板v-for= table header中的项
table-column v-if= item . children item . children . length :key= item . id :column-header= item /
El-table-column v-else:key= item . id :label= item . label :prop= item . prop align= center /
/模板
/el-table
/模板
脚本
从“@/components/Table/TableColumn”导入表列
导出默认值{
名称：“动态的”，
组件：{
表格列
},
道具：{
//表格的数据
表数据：{
类型：数组，
必填：真
},
//多级表头数据
表格标题：{
类型：数组，
必填：真
},
//表格的高度
高度：{
类型：字符串，
默认值：“300”
}
},
方法：{
//线路点击事件
handleRowClick(行、列、事件){
//console.log(行)
//console.log(列)
//console.log(事件)
//通知调用父组件的行单击事件
//行作为参数传递
这个。$emit(行单击，行)
}
}
}
/脚本
TableColumn.vue
模板
El-表格-列
:label=columnHeader.label
:prop=columnHeader.label
align=居中
！-列标题对应关系：列标题-
模板v-for= column header . children中的项
表格列
v-if= item . children item . children . length
:key=item.id
:column-header=item
/
El-表格-列
v-否则
:key=item.name
:label=item.label
:prop=item.prop
align=居中
/
/模板
/El-表格-列
/模板
脚本
导出默认值{
名称：表列，
道具：{
columnHeader: {
类型：对象，
必填：真
}
}
}
/脚本
样式范围
/风格
几点重要说明：
(1)表格头部的传参主要分为两类：带孩子们节点和不带孩子们节点的，如下图所示
请注意孩子们节点是为了完成复杂表头的渲染，例如上面这个示例最终的表头渲染样式如下：
那么问题来了，埃尔-表格-列是埃尔表的标签，那这个表格列是个啥？
(2)动态的调用TableColumn.vue组件
动态可探测的通过：列标题给TableColumn.vue传递带孩子们子节点的表头信息，TableColumn.vue接收到这个节点信息后，主要做了以下两件事情：
第一：通过埃尔-表格-列渲染了一个标签标签
第二：继续判断该节点是否存在孩子们子节点
=如果存在孩子们节点，继续通过表格列进行渲染，继续把这个子节点传给TableColumn.vue组件，重复上述步骤
=如果不存在孩子们节点，表示这是一个终止节点，通过埃尔-表格-列渲染结束
#2# - 在展示页面使用动态表格组件
模板
div class=demo
电子贺卡
！-查询区域-
el-row :gutter=10
el-col :span=6
div class=网格-内容背景-紫色
span style=margin-right: 10px 选择框-/span
埃尔-选择
v-model=specified_table
占位符=请选择
埃尔选项
v-for=选项中的项目
:key=item.zb_code
:label=item.zb_name
:value=item.zb_code
/
/el-select
/div
/el-col
el-col :span=6
div class=网格-内容背景-紫色
El-button type= primary plain @ click= handleQueryClick 查询/el-button
/div
/el-col
/el-row
！-表格区域-
动态表格
v-if=dynamicTableShow
：表数据=表数据
:table-header=tableHeaders
:height= 550px像素像素
/
/电子名片
/div
/模板
脚本
//引入组件
从" @/组件/表格/动态表格"导入动态表
//获取表头信息
从" @/API/表格标题"导入{ getTableHeader02_1，getTableHeader02_2，getTableHeader02_3，getTableHeader02_4 }
导出默认值{
名称："索引",
组件：{ //组件注册
动态的
},
data () {
返回{
//- 查询-
选项：[
//{ zb_name:指标名，zb_code:指标代码 }
],
指定的表： ,//指标值
//- 表格-
dynamicTableShow: true，//DynamicTable组件重新渲染变量
//表头数据
表格标题：[],
//表格数据
表数据：[]
}
},
已创建(){
//api-获取指标的下拉框数据
getSpecifiedTable().然后(res={
this.options=res.data
})
},
方法：{
//判断值是否在数组中
isExistArr (arr，val) {
返回排列包括(瓦尔)
},
//重新渲染表格
refreshTable (zb_code) {
//根据价值值获取标签值
const obj=this。选项。查找((项目)={
return item.zb_code===zb_code
})
console.log(zb_code)
console.log(obj.zb_name)
//设置动态表格显示为假的，使得动态的组件重新渲染
this.dynamicTableShow=false
//根据不同指标渲染不同的表头
const TBArr01=[M01 ， M02 ， M03 ， M05] //第一类表
const TBArr02=[M04 ， M07 ， M08 ， M12] //第2类表
const TBArr03=[M09 ， M10 ， M11] //第3类表
const TBArr04=[M06] //第四类表
if (this.isExistArr(TBArr01，zb_code)) {
这个。table headers=gettable header 02 _ 1(obj。zb _ name)//渲染表头样式一
}
if (this.isExistArr(TBArr02，zb_code)) {
this . table headers=gettable header 02 _ 2(obj . zb _ name)//呈现标题样式2
}
if (this.isExistArr(TBArr03，zb_code)) {
this . table headers=gettable header 02 _ 3(obj . zb _ name)//呈现标题样式3
}
if (this.isExistArr(TBArr04，zb_code)) {
this . table headers=gettable header 02 _ 4(obj . zb _ name)//呈现标题样式4
}
//API-获取表格数据
getTableList02(zb_code)。然后(res={
this.tableData=res.data
})
//这里是DOM没有更新，这里的代码是必须的。
这个。$nextTick(()={
//DOM现在更新了
this.dynamicTableShow=true
})
},
//点击[查询]事件。
handlequeryclik(){
const zb _ code=this . specified _ table
//验证查询条件不能为空。
if(zb _ code=== zb _ code===undefined){
这个。$message.warning(指示器不能为空！)
}否则{
console.log(zb_code: zb_code
//重新呈现标题和表格
this.refreshTable(zb_code)
}
}
}
}
/脚本
使用动态表组件相对简单。唯一需要注意的是，在渲染表头和数据时，必须添加下面的代码，否则页面将无法按预期渲染。
这个。$nextTick(()={
//DOM现在更新了
this.dynamicTableShow=true
})
为了这个。$nextTick()，请参考https://cn.vuejs.org/v2/guide/reactivity.html,官网
#3# - 如何给动态表格根据需求动态添加序号列/索引列
在Element UI的官方示例中，如果向表中添加序列号列或索引列非常简单，只需在el-table中声明一个特殊的el-table-column即可。
El-表格-列类型=index 宽度= 50 /El-表格-列
如何在动态表组件中添加序列号列？更何况是自己加还是按需不加呢？
首先，让我们转换DynamicTable.vue
与官方示例一样，我们首先在el-table中声明一个el-table-column。
El-table-column v-if= is index type= index width= 100 label=序列号 align=center/
注意，有一个v-if绑定了一个isIndex值，这是我们需要在父组件中传递值的键。
在props中将isIndex声明为布尔类型
道具：{
//表格的数据
表数据：{
类型：数组，
必填：真
},
//多级表头数据
表格标题：{
类型：数组，
必填：真
},
//表格的高度
高度：{
类型：字符串，
默认值：“300”
},
//需要添加序号列吗？
isIndex: {
类型：布尔型
}
}
当在显示页面中使用组件时，指定的参数通过is-index传递。
动态表格
v-if=dynamicTableShow
:表数据=表数据
:table-header=tableHeaders
:height= 550px像素
:is-index=true
/
当同一个页面的页眉需要切换的时候，上面的写法很容易在页面初始化的时候单独显示一个序号列，就像下面这样，很不雅观。
希望在表头渲染的时候可以像其他普通列一样同时加载序列号列。我能做到。
动态表格
v-if=dynamicTableShow
:表数据=表数据
:table-header=tableHeaders
:height= 550px像素
:is-index=isAddIndex
/
将原来的常量“true”改为变量isAddIndex，然后在标题呈现完成时将其值改为true。
this.isAddIndex=true
这样，序列号列可以与其他普通列同时呈现。
[参考]
https://www.jianshu.com/p/9c4ba833658f
https://www.cnblogs.com/llcdxh/p/9473458.html
这就是本文中关于动态表的元素实现的示例代码。有关元素动态表的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。