【Vue】ElementUI的expand table 点击展开，属性变化未引起表格响应

Z时代
2024-01-10
分类：技术分享

最近在给后台管理系统做表格，要求展开可现实详细内容，遇到奇怪的问题（来自后端狗的疑惑），整了个测试代码，发上来“求药”
问题描述（见代码）

隐藏->展开：以下两个属性没有让网页发生响应

其他列展开->切换当前列展开：这两个属性又能生效

<template>
<el-table
:data="tableData5"
style="width: 100%"
@expand-change="expandChange">
<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-column type="expand">
<template >
<el-table v-loading="loading" :data="subTableData">
<el-table-column label="所属店铺" prop="shop"></el-table-column>
<el-table-column label="店铺 ID" prop="shopId"></el-table-column>
<el-table-column label="商品分类" prop="category"></el-table-column>
<el-table-column label="店铺地址" prop="address"></el-table-column>
</el-table>
</template>
</el-table-column>
</el-table>
</template>
<script>
import axios from "axios"
var Mock = require('mockjs');
Mock.mock('/subtable/data',[{
category: '江浙小吃、小吃零食',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}
])
export default {
data() {
return {
loading:true,
subTableData:[],
tableData5: [{
id: '12987122',
name: '好滋好味鸡蛋仔',
desc: '荷兰优质淡奶，奶香浓而不腻',
}, {
id: '12987123',
name: '好滋好味鸡蛋仔',
desc: '荷兰优质淡奶，奶香浓而不腻',
}, {
id: '12987125',
name: '好滋好味鸡蛋仔',
desc: '荷兰优质淡奶，奶香浓而不腻',
}]
}
},
methods: {
expandChange(row, expandedRows) {
let _this = this
//恢复默认值
_this.loading = true
_this.subTableData = []
//加载数据
axios.get('/subtable/data')
.then(function (res) {
/**
* ----问题描述----
* 1.隐藏->展开：以下两个属性没有让网页发生响应
* 2.其他列展开->切换当前列展开：这两个属性又能生效
*/
_this.subTableData = res.data
_this.loading = false
}).catch(function (error) {
console.log(error);
});
if (expandedRows.length > 1) {
//只展开当前选项
expandedRows.shift()
}
}
}
}</script>

回答

已解决，改完后代码如下：

<template>
    <el-table
            :data="tableData5"
            style="width: 100%"
            row-key="id"
            :expand-row-keys="expandKeys"
            @expand-change="expandChange">
        <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-column type="expand">
            <template >
                <el-table v-loading="loading" :data="subTableData">
                    <el-table-column label="所属店铺" prop="shop"></el-table-column>
                    <el-table-column label="店铺 ID" prop="shopId"></el-table-column>
                    <el-table-column label="商品分类" prop="category"></el-table-column>
                    <el-table-column label="店铺地址" prop="address"></el-table-column>
                </el-table>
            </template>
        </el-table-column>
    </el-table>
</template>
<script>
    import axios from "axios"
    var Mock = require('mockjs');
    Mock.mock('/subtable/data',[{
        category: '江浙小吃、小吃零食',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
    }
    ])
    export default {
        data() {
            return {
                expandKeys:[],/** 新增 **/
                loading:true,
                subTableData:[],
                tableData5: [{
                    id: '12987122',
                    name: '好滋好味鸡蛋仔',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                }, {
                    id: '12987123',
                    name: '好滋好味鸡蛋仔',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                }, {
                    id: '12987125',
                    name: '好滋好味鸡蛋仔',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                }]
            }
        },
        methods: {
            expandChange(row, expandedRows) {
                if(this.expandKeys.indexOf(row.id)>=0){
                    //收起当前行
                    this.expandKeys.shift()
                    return;
                }
                let _this = this
                //恢复默认值
                _this.loading = true
                _this.subTableData = []
                //加载数据
                axios.get('/subtable/data')
                    .then(function (res) {
                        _this.subTableData = res.data
                        _this.loading = false
                        _this.expandKeys.shift()            /** 新增 **/
                        _this.expandKeys.push(row.id)       /** 新增 **/
                    }).catch(function (error) {
                    console.log(error);
                });
                if (expandedRows.length > 1) {
                    //只展开当前选项
                    expandedRows.shift()
                }
            }
        }
    }</script>