element-ui table 嵌套

嵌套的时时候用template,数据 scope.row.xxx

<template>
    <div>
            <el-table :data="urls" style="width: 100%">
                <el-table-column prop="name" label="技术栈">
                </el-table-column>
                <el-table-column label="文档地址">
                    <template slot-scope="scope">
                        <a v-bind:href="scope.row.link" target="_blank">{{scope.row.link}}</a>
                    </template>
                </el-table-column>
            </el-table>
    </div>
</template>

<script>
    export default {
        name: "Doc",
        data() {
            return {
                urls: [
                    {name:'Python', link:'https://www.python.org/'},
                    {name:'Django', link:'https://www.djangoproject.com/'},
                    {name:'Django中文', link:'https://docs.djangoproject.com/zh-hans/2.1/'},
                    {name:'Django Suit', link:'https://django-suit.readthedocs.io/en/latest/configuration.html'},
                    {name:'Bootstrap', link:'http://www.bootcss.com/'},
                    {name:'Vue', link:'https://cn.vuejs.org/'},
                    {name:'ElementUI', link:'http://element-cn.eleme.io/#/zh-CN'},
                ]
            }
        }
    }
</script>

<style scoped>

</style>

 

转载于:https://www.cnblogs.com/dannyyao/p/10219653.html

Element UI 提供了一个名为 `el-table` 的组件,用于构建表格。如果你想要在 Element UI 中创建一个嵌套表格(即表格内部包含其他表格),可以使用 `el-table-column` 和 `el-table` 组件配合来实现。 首先,你需要在顶级 `el-table` 标签内定义一个列(column),这个列的内容将是另一个 `el-table`。例如: ```html <template> <div> <el-table :data="parentData"> <el-table-column prop="parentColumn" label="父级列"> <template slot-scope="{ row }"> <el-table :data="row.nestedData"> <!-- 这里定义子表头和单元格 --> <el-table-column v-for="(subColumn, index) in subColumns" :key="index" :prop="subColumn.prop" :label="subColumn.label"></el-table-column> <el-table-row v-for="nestedRow in row.nestedData" :key="nestedRow.id"> <!-- 子行内容显示 --> <el-table-cell v-for="(cell, cellIndex) in subColumns" :key="cellIndex">{{ nestedRow[cell.prop] }}</el-table-cell> </el-table-row> </el-table> </template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { parentData: [ // 父级数据,每个对象有 nestedData 属性 { id: 1, parentColumn: 'Parent 1', nestedData: ... }, // ... 其他数据 ], subColumns: [ { prop: 'childColumn1', label: '子列1' }, { prop: 'childColumn2', label: '子列2' }, // 其他子列定义... ], }; } }; </script> ``` 在这个例子中,`parentData` 是顶层数据源,`nestedData` 是嵌套在每个父级对象内的子数据。`subColumns` 定义了子表格的列结构。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值