原因大家都懂,我就不说了,解决方案一大堆,什么$set(),改css的,我都试了,全部没效果,仍然需要点2次才出现数据。我想要实现的是点开每一行的expand,显示的是该行数据的children数据,点开另外一行,不会影响到其他行,各行只显示他自己的children数据。先贴我成功的代码
<!-- 外层表格 row-key="id" :expand-row-keys="expandKeys" 必须有 -->
<el-table
:data="dataList"
fit
style="width: 100%;"
highlight-current-row
@expand-change="change"
row-key="id"
:expand-row-keys="expandKeys">
<!--内层表格 用props.row.child指定数据 -->
<el-table-column type="expand">
<template slot-scope="props">
<el-table :data="props.row.child" :show-header="false" class="table">
<el-table-column prop="name" label="" width="200px"></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="name" label="菜单名称" width="200px">
<template slot-scope="scope">
<i :class="scope.row.type==1?'ivu-icon fa fa-folder-open-o fa-fw':'ivu-icon el-icon-view'"
:style="scope.row.type==1?'margin-left: 0px':'margin-left: 20px'"></i>
<span @click="show(scope.$index,scope.row.id)">{{scope.row.name}}</span>
</template>
</el-table-column>
</el-table>
js部分
data() {
return {
querys: {
pid: 0,
enVisible: 1
},
expandKeys: [], // 主要看这,指定展开的行
dataList: [],
}
},
created(){
this.getList() // 先获取外层表格数据
},
methods:{
async getList() {
let { data: res } = await this.$axios.get('sys/permission', { params: this.querys })
this.dataList = res.data
this.dataList.forEach(item => {
item.child = [] // 先给一个空值
item.expand = false // 表示当前行是闭合的,不设置这个等下展开后就没法闭合了
})
},
// 点击展开行异步获取数据
async change(row, expandedRows) {
if (!row.expand) { // 先判断该行是否已经展开了
let params = {
pid: row.id
}
let { data: res } = await this.$axios.get('sys/permission', { params: params })
// this.dataList_extend = res.data
this.expandKeys.push(row.id) // 把该行的id 给expandKeys
row.child = res.data // 网上很多都是遍历然后再赋值,其实可以直接赋值就行
row.expand = true // 设置展开行是打开的
}
},
},
完美解决,效果图如下