美文网首页
ElementUi 表格嵌套表格

ElementUi 表格嵌套表格

作者: 前端技师胡帅博 | 来源:发表于2019-07-18 16:31 被阅读0次
需求图片

需求如上,点击右边的按钮显示明细表格

不知道该怎么隐藏掉展开收起的图标,研究官网搞了大半天

很幸运搜到网上大神的解决办法,还赠送了手风琴效果

代码如下:

<template>
    <el-table ref="table" border stripe highlight-current-row :data="tableData5" style="width: 800px;">
        <el-table-column label="商品 ID" prop="id" width="100">
        </el-table-column>
        <el-table-column label="商品名称" prop="name">
        </el-table-column>
        <el-table-column label="描述" prop="desc">
        </el-table-column>
        <el-table-column label="操作" width="100">
            <template slot-scope="scope">
                <el-button type="text" @click="toogleExpand(scope.row)">查看详情</el-button>
            </template>
        </el-table-column>
        <el-table-column type="expand" width="1">
            <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="商品名称">
                        <span>{{ props.row.age }}</span>
                    </el-form-item>
                </el-form>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
export default {
    data() {
        return {
            tableData5: [
                {
                    id: '1',
                    name: '好滋好味鸡蛋仔1',
                    desc: '荷兰优质淡奶,奶香浓而不腻1',
                    age: 11,
                },
                {
                    id: '2',
                    name: '好滋好味鸡蛋仔2',
                    desc: '荷兰优质淡奶,奶香浓而不腻2',
                    age: 11,
                },
                {
                    id: '3',
                    name: '好滋好味鸡蛋仔3',
                    desc: '荷兰优质淡奶,奶香浓而不腻3',
                    age: 11,
                },
                {
                    id: '4',
                    name: '好滋好味鸡蛋仔4',
                    desc: '荷兰优质淡奶,奶香浓而不腻4',
                    age: 11,
                },
            ],
        };
    },
    methods: {
        toogleExpand(row) {
            const $table = this.$refs.table;
            this.tableData5.forEach(item => {
                if (row.id !== item.id) {
                    $table.toggleRowExpansion(item, false);
                }
            });
            $table.toggleRowExpansion(row);
        },
    },
};
</script>

相关文章

网友评论

      本文标题:ElementUi 表格嵌套表格

      本文链接:https://www.haomeiwen.com/subject/arnllctx.html