element-ui 展开式 表格 从后台回来的数据 展示 遇见的小坑

还是接着之前的说 就是我们每次要求展开一行 就是防止后面的数据把前面的给覆盖掉

<el-table :data="tableData" style="width:100%" border class="tableBox" @expand-change="expandSelect" :row-key='getRowKeys' :expand-row-keys="expands">

<el-table-column type="expand">

             <template slot-scope="props"> </template>

</el-table-column>

</el-table>

data:{

   getRowKeys(row) {
                    return row.id
                },

}

expandSelect(row, expandedRows) {
                  var that = this
                  if (expandedRows.length) {
                    that.expands = []
                    if (row) {
                      that.expands.push(row.id)
                      console.log(that.expands);
                    }
                  } else {
                    that.expands = []
                  }

}

我要说就得就是很简单 就是 你把测试数据换成后台回来的数据的时候 一定要保持 这俩个同步  比如

如果后台回来的 是 user_id  那这俩个地方都改成 row.user_id  他就是根据 某一列的 是否与某一列的值相等才展开这一列其他的列关闭   因为往往后台数据的  id编号  是唯一的 所以 常常用来 作为对比 不过 要看情况而定 不要死搬硬套 

 好了 菜鸟又要去吃饭了 拜拜了