标签：el 父层 loading 表格 res 嵌套 table 数据 row

在开发过程中需要在表格展开行中再嵌套一个表格,当element自带的组件满足不了（外层表格数据和内层表数据由两个接口提供）,需要用类似懒加载的功能实现，所以选择采用展开行 + expand-change事件来实现。

实现中遇到的问题

通过展开行+ expand-change实现时,遇到一个很大的问题,就是el-table组件在更新数据内部某个属性值时,并不能实时刷新dom视图,这样会导致每次在expand-change事件中获取到内层表格数据后，给父层数据中添加属性时视图并未刷新。

解决方法

需要在获取父层表格数据时，添加一个子层表格数据的属性值（事先声明），然后在expand-change事件中给该属性赋值，这样el-table就能识别出数据变化并实时更新视图。

实现代码如下
注意: row-key属性是必须的,否则会导致组件无法识别当前展开行

<template>
	<el-table
	 	border
	    :data="tableData"
	    row-key="keyId"
	    @expand-change="expandChange"
	    style="width: 100%">
	    <el-table-column type="expand" >
	        <template slot-scope="props">
	            <el-table
	                :data="props.row.childrenData"
	                v-loading="props.row.loading"
	                border>
	                <el-table-column
	                    prop="name"
	                    show-overflow-tooltip
	                    label="任务名称">
	                </el-table-column>
	                <el-table-column
	                    prop="description"
	                    show-overflow-tooltip
	                    label="任务描述">
	                </el-table-column>
	            </el-table>
	        </template>
	    </el-table-column>
	    <el-table-column
	    prop="name"
	    show-overflow-tooltip
	    label="规则名称">
	    </el-table-column>
	</el-table>
</template>
<script>
export default {
    name: '',
    data () {
        return {
            tableData: [], // 表格数据
        };
    },
     methods: {
        // 获取父层表格数据
        _getAllRules (key, value) {
            let parmas= { method: 'find_rule_bases', [key]: value };
            API_Rules.getAllRules(parmas).then((res) => {
                if (res.code === 0) {
                    const result= JSON.parse(res.result);
                    // 获取到父层表格数据之后,遍历添加唯一id(如果有则不用加,可由后台返回)和子层表格数据
                    this.allRules = result.map((item, index) => {
                        item.keyId = index;
                        item.childrenData = []; // 添加子表格数据
                        return item;
                    });
                }
             
            }, (err) => {
                console.log(err);
                this.tableData= [];
            });
        },
       // 获取子层表格数据并更新tableData数据
        expandChange (row) {
            if (!row.childrenData ) {
            	// 通过$set属性可设置loading实现实时加载loading效果(经过测试,通过$set直接给父层数据声明子层数据时会出现报错,所以才在获取父层表格数据时声明子层表格数据)
                this.$set(row, 'loading', true);
                let params = {  };
                API_Rules.getchildren( params ).then((res) => {
                    if (res.code === 0) {
                        const children= JSON.parse(res.result);
                        // 遍历父层表格数据
                        this.allRules.forEach((temp, index) => {
                            // 找到当前展开的行，把获取到的数据赋值进去
                            if (temp.keyId === row.keyId) {
                                this.allRules[index].childrenData = children || [];
                            }
                        });
                    }
                    this.$set(row, 'loading', false);
                }, (err) => {
                    this.$set(row, 'loading', false);
                });
            }
        }
    }
}

标签：el,父层,loading,表格,res,嵌套,table,数据,row
来源： https://blog.csdn.net/weixin_38912662/article/details/116084515

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。