element表格嵌套表单,elementui表格嵌套表单
本文主要介绍了元素表多层嵌套显示的实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
有个需求是一个列表，里面包含多个单子，每个单子可以是唯一，也可以是多个合并之后的，而且每个单子下面显示的是另外一个表格，来上图
每行的操作还不一样，然后通过官网的一些例子总结了一下合并代码
模板
div class=应用程序容器
差异
埃尔表
:data=tableData
style= width:100%；下边距：20px
:span-method=arraySpanMethod
row-key=id
边界
el-table-column type=expand
模板插槽-scope=props
埃尔表
class=表中的表
:show-header=false
:data=props.row.datas
style= width:100%；
row-key=id
:span-method=arraySpanMethod
边界
el-table-column type=expand
模板插槽-scope=props
埃尔表
class=表中的表
:data=props.row.datas
style= width:100%；
row-key=id
边界
El-table-column prop= date label=下单日期宽度= 180 /El-表格-列
El-table-column prop= type label=单据类型宽度= 180 /El-表格-列
埃尔-表格-列属性=状态标签=状态/El-表格-列
埃尔-表格-列标签=操作宽度=120
模板插槽-scope=props
El-button type= text size= small 移除/el-button
/模板
/El-表格-列
/el-table
/模板
/El-表格-列
El-table-column prop= applyNo label=申请单号宽度= 132.2 /El-表格-列
El-table-column prop= name label=姓名宽度= 180 /El-表格-列
埃尔-表格-列属性=地址标签=地址/El-表格-列
/el-table
/模板
/El-表格-列
El-table-column prop= applyNo label=申请单号宽度= 180 /El-表格-列
El-table-column prop= name label=姓名宽度= 180 /El-表格-列
埃尔-表格-列属性=地址标签=地址/El-表格-列
埃尔-表格-列标签=操作宽度=120
模板插槽-scope=props
El-button type= text size= small 移除/el-button
/模板
/El-表格-列
/el-table
/div
/div
/模板
脚本
导出默认值{
名称："名称1",
组件：{},
data() {
返回{
表格数据：[
{
id: 1，
applyNo: 202004291234 ，
名称： 李四，
地址： 上海市普陀区金沙江路1518 弄
},
{
id: 2，
applyNo: 202004291235 ，
名称： 张三，
地址： 上海市普陀区金沙江路1517 弄
},
{
id: 3，
applyNo: 202004291236，202004291237 ，
名称： 王五，
地址： 上海市普陀区金沙江路1519 弄，
数据：[
{
id: 31，
applyNo: 202004291236 ，
名称： 王五，
地址： 上海市普陀区金沙江路1519 弄，
数据：[
{
id: 31，
日期："2016年5月一日",
类型： 类型1,
状态： 已发货
},
{
id: 32，
日期："2016年5月一日",
类型：“类型2”，
状态：“未发货”
}
]
},
{
id: 32，
applyNo: 202004291237 ，
姓名：王武，
地址：“上海市普陀区金沙江路1519弄”
}
]
},
{
id: 4，
applyNo: 202004291238 ，
姓名：赵66 ，
地址：“上海市普陀区金沙江路1516弄”
}
]
};
},
方法：{
arraySpanMethod({ row，column，rowIndex，columnIndex }) {
如果(！row.datas) {
if (columnIndex===0) {
return [0，0]；
} else if (columnIndex===1) {
return [1，2]；
}
}
}
}
};
/脚本
style lang=scss 范围。应用程序容器{
* v型深{。El-表th {
背景：# ddeeff
}。El-table _ _扩展单元格{
边框-底部：0px
边框-右边：0px
填充：0px 0px 0px 47px
}
}。表中表{
border-top:0px；
}
}
/风格
注意：需要注意的是，这里的子节点不能用children，因为官方默认是children，所以会出现其他下拉组件。
设置td宽度时，需要注意的是，内外差为47.8。
关于元素表多层嵌套显示的实践，本文到此为止。更多元素表相关多层嵌套内容，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。