elementui展开行踩过的坑

前端小白，此文仅为自己见解
项目需求使用展开行实现表格嵌套，且要根据当前点击的行来动态获取展开行中的数据
总结一下踩过的坑：
1.展开行中的表格data绑定的必须是外层表格中的数据的子项，否则会出现第一次点击展开嵌套表格不显示，点击两次才会显示的bug

export default {
    data(){
        return{
            tableData:[{     //外层绑定的data
            	name:'xiaoming',
            	age:'18',
            	rowData:[],    //展开行表格绑定的data
            }],
        }
    },
}

但是这个方法需要每次点击的时候获取到当前点击行的index，并异步请求获取数据添加到外层表格绑定的data中，这样有些麻烦，我想单独定义一个变量来绑定嵌套的表格
get到一个不是太好的解决方法，在展开行的tem中加上slot-scope=“scope”，但下面不用使用这个scope，vscode中可能会红线报错，但不影响正常效果

    <el-table-column
     type="expand">
        <template slot-scope="scope">   //这里scope会报错
        	<el-table 
        	:data="rowData">
        		...
        	</el-table>
        </template>
    </el-table-column>

export default {
    data(){
        return{
            tableData:[],    //外层绑定的data
            rowData:[],    //展开行表格绑定的data
        }
    },
}

2.因为嵌套表格的数据是动态获取的，所以要保证每次只能展开一行，展开多行会出现每个展开行的表格数据都是一样的bug
实现每次只能展开一行，给外层表格添加如下属性
tem

	<el-table 
		:data="tableData"
		:row-key='getRowKeys'
	   	:expand-row-keys="expands"
	   	@expand-change="expandChange">
	  		...
 	</el-table>

js：

	export default {
    data(){
        return{
            tableData:[],    //外层绑定的data
            rowData:[],    //展开行表格绑定的data
            expands: [],
            getRowKeys (row) {
              return row.id
            },
        }
    },
     methods:{
		//展开行选项变化时触发
        expandChange(row,expandedRows){
            this.rowData = []
            var that = this
            if (expandedRows.length) {
              that.expands = []
              if (row) {
                that.expands.push(row.id)
              }
            } else {
              that.expands = []
            }

            this.$http({    //发送异步请求获取嵌套表格数据
                ···
            }).then(({data})=>{
                this.rowData = data.list
            })
        },
	}
}