热门标签
热门文章
- 1微信小程序学习笔记（3）——代码结构_compiletype
- 2mysql空日期_MYSQL 获取当前日期及日期格式以及非空处理
- 3mysql datetime 默认值_大佬整理的mysql规范，分享给大家
- 4STM32面试相关问题_stm32面试常问问题
- 5云计算的数据仓库：如何构建大数据解决方案
- 6FileNotFoundError: [WinError 2] "dot" not found in path._"filenotfounderror: [winerror 2] \"dot\" not found
- 7Description: Web server failed to start. Port 48009 was already in use. Action: Identify and stop_o.s.scheduling.concurrent.threadpooltaskexecutor -
- 8第K短路(A*算法）
- 9Latex数学公式汇总_latex公式
- 10SSM框架梳理(一)SpringMVC工作流程_ssm框架工作流程
当前位置: article > 正文
element表格嵌套表格_element表格展开嵌套表格
作者：你好赵伟 | 2024-03-21 09:02:04
赞
踩
element表格展开嵌套表格
在表格内多个可展开的表格
- <template>
- <el-table
- :data="tableData"
-
-
- style="width: 100%">
- <el-table-column type="expand" style="left:20px">
- <template slot-scope="props">
-
- <!-- <template > -->
- <el-table
- :data="props.row.children"
- style="width: 100% ;margin-left: 47px">
- <el-table-column
- prop="date"
- label="门店"
- width="180">
- </el-table-column>
- <el-table-column
- prop="name"
- label="门店类型"
- width="180">
- </el-table-column>
- <el-table-column
- prop="address"
- label="地址">
- </el-table-column>
- </el-table>
- </template>
- </el-table-column>
- <el-table-column
- label="商品 ID"
- prop="id">
- </el-table-column>
- <el-table-column
- label="商品名称"
- prop="name">
- </el-table-column>
- <el-table-column
- label="描述"
- prop="desc">
- </el-table-column>
- </el-table>
- </template>
-
- <style lang='scss' scoped>
- .demo-table-expand {
- font-size: 0;
- }
- .demo-table-expand label {
- width: 90px;
- color: #99a9bf;
- }
- .demo-table-expand .el-form-item {
- margin-right: 0;
- margin-bottom: 0;
- width: 50%;
- }
- /deep/.el-table .el-table--fit .el-table--enable-row-hover .el-table--enable-row-transition{
- margin-left: 47px !important
- }
- </style>
-
- <script>
- export default {
- data() {
- return {
- tableData: [{
- id: '12987122',
- name: '好滋好味鸡蛋仔',
- category: '江浙小吃、小吃零食',
- desc: '荷兰优质淡奶，奶香浓而不腻',
- address: '上海市普陀区真北路',
- shop: '王小虎夫妻店',
- shopId: '10333',
- children: [{
- id: 31,
- date: '门店名称编码1',
- name: 'BC',
- address: '上海市普陀区金沙江路 151119 弄'
- }, {
- id: 32,
- date: '门店名称编码1',
- name: 'Ba',
- address: '上海市普陀区金沙江路 151119 弄'
- }]
- }, {
- id: '12987123',
- name: '好滋好味鸡蛋仔',
- category: '江浙小吃、小吃零食',
- desc: '荷兰优质淡奶，奶香浓而不腻',
- address: '上海市普陀区真北路',
- shop: '王小虎夫妻店',
- shopId: '10333',children: [{
- id: 31,
- date: '2016-05-01',
- name: '王小虎',
- address: '上海市普陀区金沙江路 1519 弄'
- }, {
- id: 32,
- date: '2016-05-01',
- name: '王小虎',
- address: '上海市普陀区金沙江路 1519 弄'
- }]
- }, {
- id: '12987125',
- name: '好滋好味鸡蛋仔',
- category: '江浙小吃、小吃零食',
- desc: '荷兰优质淡奶，奶香浓而不腻',
- address: '上海市普陀区真北路',
- shop: '王小虎夫妻店',
- shopId: '10333'
- }, {
- id: '12987126',
- name: '好滋好味鸡蛋仔',
- category: '江浙小吃、小吃零食',
- desc: '荷兰优质淡奶，奶香浓而不腻',
- address: '上海市普陀区真北路',
- shop: '王小虎夫妻店',
- shopId: '10333'
- }]
- }
- }
- }
- </script>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/279919
推荐阅读
相关标签
