elementUI table组件expand 展开行数据改变之后不能立刻刷新UI必须改变点击多次expand才行？

Created on 31 Mar 2017  ·  16Comments  ·  Source: ElemeFE/element

我在用 table组件的下拉展开行时 展开行的数据需要用ajax去获取 在触发展开关闭行 的事件里 改变了 展开后显示内容绑定的数据 但是他不会立即改变显示内容 需要我改变一下再次点击expand 才能显示数据

picture 419921017
👍1

All 16 comments

你好，因为本 issue 不符合我们的规范，所以被关闭了。请使用 issue-generator 提交 issue。相关信息：#3692。

element-bot picture element-bot on 31 Mar 2017
👎1

你是怎么把事件加上去的

qingyunmeng042515 picture qingyunmeng042515 on 5 Apr 2017

他有个expand 事件的 你可以看下 还有我那个问题你解决了么 就是 table 下拉的速度比ajax请求的速度快 所以需要点击2次才能出现页面

419921017 picture 419921017 on 5 Apr 2017

我也是出现了这个问题啊，在想办法，你有想到动态插入一行的方法吗。而且这个expand事件我需要写在那个元素上。

qingyunmeng042515 picture qingyunmeng042515 on 5 Apr 2017

这样写好像不行 我是事先写好了 然后往里面插的 你有时间写个demo 吧 我上次发issue 因为没有demo 不好发

419921017 picture 419921017 on 5 Apr 2017

请给发个demo吧，我更改了tableData，但是table不更新 @419921017 ，谢谢！

oldguncm picture oldguncm on 8 Apr 2017

使用th.$refs.multipleTable.doLayout(); 获取数据后使用这个就可以了 父table增加一个ref="multipleTable" @419921017

encorehe picture encorehe on 23 Jan 2018
👍1

使用th.$refs.multipleTable.doLayout(); 获取数据后使用这个就可以了 父table增加一个ref="multipleTable" @419921017

感觉还是没用耶

huayue1012243788QQ picture huayue1012243788QQ on 14 Dec 2018

您好，这个问题解决了吗？最近项目上遇到同样的问题，期待您的解答

Even-Lau picture Even-Lau on 24 Jan 2019

您好，这个问题解决了吗？最近项目上遇到同样的问题，期待您的解答

这个问题我已经解决了，这是vue组件实例化的问题。expand展开的数据必须与父table的数据同时取到。这个目前只能通过改后端代码修改返回数据格式吧。在父table的数据里加个children字段，children里放展开的数据。只能这样。

huayue1012243788QQ picture huayue1012243788QQ on 24 Jan 2019

这个应该是vue 动态增加属性导致的，你需要将需要远程获取的数据的字段在获取展示数据时就事先声明，然后在expand-change 事件里再通过ajax 获取数据后赋值就没问题了。

kakayunmu picture kakayunmu on 10 Jun 2019

请问解决了嘛？我也遇到同样的问题。有考虑过使用 树懒加载形式实现，但是这样子并不能自定义dom节点，这不是我所需要的。

nongzhenli picture nongzhenli on 25 Jul 2019

已成功解决，贴下我解决的代码：

table 结构

<el-table :data="tableData.rows"
        stripe
        :row-class-name="tableRowClassName"
        class="table-list--box"
        header-row-class-name="table-row--header"
        ref="multipleTable"
        @expand-change="handleExpandChange">
    <el-table-column type="expand">
        <template slot-scope="scope">
            <div v-loading="expandTableLoding">
                <el-form label-position="left" label-width="90px"  class="table-expand">
                    <el-form-item v-for="(item, key, idx) in expandTableRow[scope.row.index]" :key="item.xh" :label="getKeyToName(key)">
                        <span>{{item || "暂无数据"}}</span>
                    </el-form-item>
                </el-form>
            </div>
        </template>
    </el-table-column>
    <el-table-column align="center" v-for="(item, key) in dataLabelFiltersIndexKey(tableDataLable)"
                        :key="key"
                        :label="item">
        <template slot-scope="scope">{{ scope.row[key] | unitPercentFilter(key) }}</template>
    </el-table-column>
</el-table>

方法

methods: {
    async handleExpandChange(row, expandedRows){
        if(expandedRows.length > 0){
            var xh = row.xh;
            if(this.expandTableRow.hasOwnProperty(row.index)){
                return false;
            };
            this.expandTableLoding = true
            await this.getDetailStu(xh).then(res=>{
                // TODO.. 以索引的形式更新数组，vue视图并不能检测响应，需要通过$set方法去更新
                this.$set(this.expandTableRow, row.index, res)
            })
            this.expandTableLoding = false
        }
    },
}
nongzhenli picture nongzhenli on 26 Jul 2019
👀1 😕1

已成功解决，贴下我解决的代码：

table 结构

<el-table :data="tableData.rows"
        stripe
        :row-class-name="tableRowClassName"
        class="table-list--box"
        header-row-class-name="table-row--header"
        ref="multipleTable"
        @expand-change="handleExpandChange">
    <el-table-column type="expand">
        <template slot-scope="scope">
            <div v-loading="expandTableLoding">
                <el-form label-position="left" label-width="90px"  class="table-expand">
                    <el-form-item v-for="(item, key, idx) in expandTableRow[scope.row.index]" :key="item.xh" :label="getKeyToName(key)">
                        <span>{{item || "暂无数据"}}</span>
                    </el-form-item>
                </el-form>
            </div>
        </template>
    </el-table-column>
    <el-table-column align="center" v-for="(item, key) in dataLabelFiltersIndexKey(tableDataLable)"
                        :key="key"
                        :label="item">
        <template slot-scope="scope">{{ scope.row[key] | unitPercentFilter(key) }}</template>
    </el-table-column>
</el-table>

方法

methods: {
    async handleExpandChange(row, expandedRows){
        if(expandedRows.length > 0){
            var xh = row.xh;
            if(this.expandTableRow.hasOwnProperty(row.index)){
                return false;
            };
            this.expandTableLoding = true
            await this.getDetailStu(xh).then(res=>{
                // TODO.. 以索引的形式更新数组，vue视图并不能检测响应，需要通过$set方法去更新
                this.$set(this.expandTableRow, row.index, res)
            })
            this.expandTableLoding = false
        }
    },
}

你这个是通过async强行变成同步获取数据？我之前试过$set方法，第一次展开也是没有用的。

huayue1012243788QQ picture huayue1012243788QQ on 26 Jul 2019

已成功解决，贴下我解决的代码：

table 结构

<el-table :data="tableData.rows"
        stripe
        :row-class-name="tableRowClassName"
        class="table-list--box"
        header-row-class-name="table-row--header"
        ref="multipleTable"
        @expand-change="handleExpandChange">
    <el-table-column type="expand">
        <template slot-scope="scope">
            <div v-loading="expandTableLoding">
                <el-form label-position="left" label-width="90px"  class="table-expand">
                    <el-form-item v-for="(item, key, idx) in expandTableRow[scope.row.index]" :key="item.xh" :label="getKeyToName(key)">
                        <span>{{item || "暂无数据"}}</span>
                    </el-form-item>
                </el-form>
            </div>
        </template>
    </el-table-column>
    <el-table-column align="center" v-for="(item, key) in dataLabelFiltersIndexKey(tableDataLable)"
                        :key="key"
                        :label="item">
        <template slot-scope="scope">{{ scope.row[key] | unitPercentFilter(key) }}</template>
    </el-table-column>
</el-table>

方法

methods: {
    async handleExpandChange(row, expandedRows){
        if(expandedRows.length > 0){
            var xh = row.xh;
            if(this.expandTableRow.hasOwnProperty(row.index)){
                return false;
            };
            this.expandTableLoding = true
            await this.getDetailStu(xh).then(res=>{
                // TODO.. 以索引的形式更新数组，vue视图并不能检测响应，需要通过$set方法去更新
                this.$set(this.expandTableRow, row.index, res)
            })
            this.expandTableLoding = false
        }
    },
}

你这个是通过async强行变成同步获取数据？我之前试过$set方法，第一次展开也是没有用的。

即使我不使用 async/await 结果也并么有受到影响呀。

你现在依然没有解决吗？

上面的代码缺少了关键的一个，放置于 table 的 cell-class-name 属性，可看文档

// 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
// TODO..这里可用于设定每行的索引值
tableRowClassName({row, rowIndex}){
     row.index = rowIndex
     return "table-row--class"
},
nongzhenli picture nongzhenli on 26 Jul 2019

已成功解决，贴下我解决的代码：

table 结构

<el-table :data="tableData.rows"
        stripe
        :row-class-name="tableRowClassName"
        class="table-list--box"
        header-row-class-name="table-row--header"
        ref="multipleTable"
        @expand-change="handleExpandChange">
    <el-table-column type="expand">
        <template slot-scope="scope">
            <div v-loading="expandTableLoding">
                <el-form label-position="left" label-width="90px"  class="table-expand">
                    <el-form-item v-for="(item, key, idx) in expandTableRow[scope.row.index]" :key="item.xh" :label="getKeyToName(key)">
                        <span>{{item || "暂无数据"}}</span>
                    </el-form-item>
                </el-form>
            </div>
        </template>
    </el-table-column>
    <el-table-column align="center" v-for="(item, key) in dataLabelFiltersIndexKey(tableDataLable)"
                        :key="key"
                        :label="item">
        <template slot-scope="scope">{{ scope.row[key] | unitPercentFilter(key) }}</template>
    </el-table-column>
</el-table>

方法

methods: {
    async handleExpandChange(row, expandedRows){
        if(expandedRows.length > 0){
            var xh = row.xh;
            if(this.expandTableRow.hasOwnProperty(row.index)){
                return false;
            };
            this.expandTableLoding = true
            await this.getDetailStu(xh).then(res=>{
                // TODO.. 以索引的形式更新数组，vue视图并不能检测响应，需要通过$set方法去更新
                this.$set(this.expandTableRow, row.index, res)
            })
            this.expandTableLoding = false
        }
    },
}

你这个是通过async强行变成同步获取数据？我之前试过$set方法，第一次展开也是没有用的。

即使我不使用 async/await 结果也并么有受到影响呀。
你现在依然没有解决吗？

不是我已经解决了。只不过我当时用$set方法并不能解决。用的vue2..0版本。

huayue1012243788QQ picture huayue1012243788QQ on 26 Jul 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

yubo111 picture yubo111  ·  3Comments
gengxuelei picture gengxuelei  ·  3Comments
makunsusu picture makunsusu  ·  3Comments
akaylh picture akaylh  ·  3Comments
yuchonghua picture yuchonghua  ·  3Comments