el-table展开行---每次只展开一个

最新推荐文章于 2023-12-07 14:55:27 发布

努力学习~冲鸭

最新推荐文章于 2023-12-07 14:55:27 发布

阅读量4.9k

点赞数 6

分类专栏： elementUI 文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/keke11211/article/details/121899394

版权

elementUI 专栏收录该内容

15 篇文章

订阅专栏

本文展示了如何使用Vue.js的Element UI库创建一个表格组件，该组件在点击时仅展开一行详细信息。通过修改代码，实现了表格行的展开和收起功能，确保每次只显示一行的扩展内容，包括商品名称、所属店铺、商品ID等详细信息。代码中包含了数据处理方法和样式设置，使得表格展示更加清晰和易用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图一（修改前可以展开多个）：

图二（修改后每次只展开一个）：

具体代码：

<template>
    <div class="wrap">
        <el-table :data="tableData" style="width: 100%" border :row-key="getRowKeys" :expand-row-keys="expands" @expand-change="expandColumn">
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="商品名称">
                            <span>{{ scope.row.name }}</span>
                        </el-form-item>
                        <el-form-item label="所属店铺">
                            <span>{{ scope.row.shop }}</span>
                        </el-form-item>
                        <el-form-item label="商品 ID">
                            <span>{{ scope.row.id }}</span>
                        </el-form-item>
                        <el-form-item label="店铺 ID">
                            <span>{{ scope.row.shopId }}</span>
                        </el-form-item>
                        <el-form-item label="商品分类">
                            <span>{{ scope.row.category }}</span>
                        </el-form-item>
                        <el-form-item label="店铺地址">
                            <span>{{ scope.row.address }}</span>
                        </el-form-item>
                        <el-form-item label="商品描述">
                            <span>{{ scope.row.desc }}</span>
                        </el-form-item>
                    </el-form>
                </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>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [
                    {
                        id: '12987122',
                        name: '好滋好味鸡蛋仔',
                        category: '江浙小吃、小吃零食',
                        desc: '荷兰优质淡奶，奶香浓而不腻',
                        address: '上海市普陀区真北路',
                        shop: '王小虎夫妻店',
                        shopId: '10333'
                    }, {
                        id: '12987123',
                        name: '好滋好味鸡蛋仔',
                        category: '江浙小吃、小吃零食',
                        desc: '荷兰优质淡奶，奶香浓而不腻',
                        address: '上海市普陀区真北路',
                        shop: '王小虎夫妻店',
                        shopId: '10333'
                    }, {
                        id: '12987125',
                        name: '好滋好味鸡蛋仔',
                        category: '江浙小吃、小吃零食',
                        desc: '荷兰优质淡奶，奶香浓而不腻',
                        address: '上海市普陀区真北路',
                        shop: '王小虎夫妻店',
                        shopId: '10333'
                    }, {
                        id: '12987126',
                        name: '好滋好味鸡蛋仔',
                        category: '江浙小吃、小吃零食',
                        desc: '荷兰优质淡奶，奶香浓而不腻',
                        address: '上海市普陀区真北路',
                        shop: '王小虎夫妻店',
                        shopId: '10333'
                    }
                ],
                expands: [], // 只展开一行放入当前行id
                getRowKeys: (row) => { // 获取当前行id
                    return row.id; // 这里看这一行中需要根据哪个属性值是id
                }
            }
        },
        methods: {
            expandColumn(row, expandedRows) {
                // 每次只展开一行
                let that = this;
                if (expandedRows.length) {
                    that.expands = []
                    if (row) {
                        that.expands.push(row.id)
                    }
                } else {
                    that.expands = []
                }
            }
        }
    }
</script>
<style>
    .wrap {
        padding: 50px;
    }
    .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%;
    }
</style>