Element ui 使用el-table 的expand-change异步加载数据

Element ui 使用el-table 的expand-change异步加载数据

---

一、问题背景

  最近在写vue项目的时候需要用到element ui里面的table组件，并且由于需要展示的数据量较多，需要异步加载一部分数据。这里就需要用到el-table里面的 expand-change方法。但是在原生的加载方式在第一次点击展开栏的时候只是传输数据但是并没有动态渲染，需要第二次点击才能加载出来数据。

---

二、解决方案

  现在既然找到了问题所在，那么解决思路也就有了。这里我们只需要先将我们需要异步加载的数据封装，使其成为表格的一个数据项，之后再请求数据进行填充即可。下面是一个简单的示例

---

具体思路

  
1）将需要异步加载的数据封装成单独的数据项。
2）设置一个加载是否成功的标识，用来判断是否加载成功并防止多次请求。

---

代码示例

  

<template>
<div>
    <el-table
    stripe
    :data="tableData"
    style="width: 100%"
    @cell-click="loadData"
    @expand-change="expandChange"
    >
    <el-table-column type="expand" >
            <template slot-scope="props">
                <el-table :data="props.row.details" v-loading="!props.row.loadDetails" @cell-click="loadData" stripe border>
                    <el-table-column
                    type="index"></el-table-column>
                    <el-table-column
                    label="名称"
                    prop="name"></el-table-column>
                    <el-table-column
                    label="状态"
                    prop="status"></el-table-column>
                </el-table>
            </template>
    </el-table-column>

    <el-table-column
        label="名称"
        prop="name">
    </el-table-column>
    </el-table>
</div>
</template>
<script>
  export default {
    data() {
      return {
            tableData: [
                {
                    name:'tempName',
                    index:'',
                    loadDetails:false,
                    details:[]
                }
            ]
      }
    },
    methods: {
            // 展开事件----动态获取内嵌表数据
        expandChange(row) {
            // console.log(row)
            if(!row.loadDetails){    //根据loadDetails判定是否已经加载了数据
                setTimeout(() =>{
                    var temp=[      //示例代码，只需要更换成axios代码加载数据即可
                        {
                            name:'name1',
                            status:'成功',
                            loadLog:false,
                            log:''
                        },
                        {
                            name:'name2',
                            status:'失败',
                            loadLog:false,
                            log:''
                        },
                        {
                            name:'name3',
                            status:'进行中',
                            loadLog:false,
                            log:''
                        }
                    ]
                    row.details=temp
                    row.loadDetails= true //加载成功之后更新标识
                    this.$message({
                        showClose: true, 
                        message: '数据加载成功'
                    })
                },1000)
            }
        }
        
    },
  }
</script>

---

示例效果