在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ ElementUI的expand table 點擊展開,屬性變化未引起表格響應(yīng)

ElementUI的expand table 點擊展開,屬性變化未引起表格響應(yīng)

最近在給后臺管理系統(tǒng)做表格,要求展開可現(xiàn)實詳細(xì)內(nèi)容,遇到奇怪的問題(來自后端狗的疑惑),整了個測試代碼,發(fā)上來“求藥”
問題描述 (見代碼)

  • 隱藏->展開:以下兩個屬性沒有讓網(wǎng)頁發(fā)生響應(yīng)
  • 其他列展開->切換當(dāng)前列展開:這兩個屬性又能生效

圖片描述

<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: '上海市普陀區(qū)真北路',
            shop: '王小虎夫妻店',
            shopId: '10333'
        }
    ])

    export default {
        data() {
            return {
                loading:true,
                subTableData:[],
                tableData5: [{
                    id: '12987122',
                    name: '好滋好味雞蛋仔',
                    desc: '荷蘭優(yōu)質(zhì)淡奶,奶香濃而不膩',
                }, {
                    id: '12987123',
                    name: '好滋好味雞蛋仔',
                    desc: '荷蘭優(yōu)質(zhì)淡奶,奶香濃而不膩',
                }, {
                    id: '12987125',
                    name: '好滋好味雞蛋仔',
                    desc: '荷蘭優(yōu)質(zhì)淡奶,奶香濃而不膩',
                }]
            }
        },
        methods: {
            expandChange(row, expandedRows) {
                let _this = this
                //恢復(fù)默認(rèn)值
                _this.loading = true
                _this.subTableData = []
                //加載數(shù)據(jù)
                axios.get('/subtable/data')
                    .then(function (res) {
                        /**
                         * ----問題描述----
                         * 1.隱藏->展開:以下兩個屬性沒有讓網(wǎng)頁發(fā)生響應(yīng)
                         * 2.其他列展開->切換當(dāng)前列展開:這兩個屬性又能生效
                         */
                        _this.subTableData = res.data
                        _this.loading = false
                    }).catch(function (error) {
                    console.log(error);
                });
                if (expandedRows.length > 1) {
                    //只展開當(dāng)前選項
                    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: '上海市普陀區(qū)真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
    }
    ])

    export default {
        data() {
            return {
                expandKeys:[],/** 新增 **/
                loading:true,
                subTableData:[],
                tableData5: [{
                    id: '12987122',
                    name: '好滋好味雞蛋仔',
                    desc: '荷蘭優(yōu)質(zhì)淡奶,奶香濃而不膩',
                }, {
                    id: '12987123',
                    name: '好滋好味雞蛋仔',
                    desc: '荷蘭優(yōu)質(zhì)淡奶,奶香濃而不膩',
                }, {
                    id: '12987125',
                    name: '好滋好味雞蛋仔',
                    desc: '荷蘭優(yōu)質(zhì)淡奶,奶香濃而不膩',
                }]
            }
        },
        methods: {
            expandChange(row, expandedRows) {
                if(this.expandKeys.indexOf(row.id)>=0){
                    //收起當(dāng)前行
                    this.expandKeys.shift()
                    return;
                }
                let _this = this
                //恢復(fù)默認(rèn)值
                _this.loading = true
                _this.subTableData = []
                //加載數(shù)據(jù)
                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) {
                    //只展開當(dāng)前選項
                    expandedRows.shift()
                }
            }
        }
    }
</script>
2017年12月28日 01:58