【记录】关于element-table expand 第一次点击

问题：

1.点击数据行上的按钮，expand 数据第一次不会渲染出来

2. 最新点击的数据会覆盖之前展示出来的数据

开始的写法：

this.supplementItemData 就是常规的表格数组数据 :[{}]

 <el-table-column type="expand">
      <template slot-scope="scope">
        <SupplementItemTable
          :tableData="supplementItemData"
        ></SupplementItemTable>
      </template>
    </el-table-column>

 this.supplementItemData = await getSupplementItemList(data)

解决 点击第一次不会渲染表格数据

数据赋值的地方需要使用set方法

//  this.supplementItemData = await getSupplementItemList(data)
// 这里一定要用set的方式处理数据，不然vue坚持不到数据变动不会重新渲染界面
 this.$set(this.supplementItemData, itemList)

解决 最新点击的数据会覆盖之前展示出来的数据

原因是因为每次获取到的数据都赋值给同一个对象，最新的数据会把对象的值改变，也就会把所有使用supplementItemData 的table 的值改变了

把之前supplementItemData 个数据格式改变一下 有原来的[] 改变成{}，父级的数据主键当key
如：

/*
{
父级主键：[子项数据数组]
}
*/
{
'p321':[{supplementItemNo:'item123'}]
}

html 改变成

<el-table-column type="expand">
      <template slot-scope="scope">
        <SupplementItemTable
          :tableData="supplementItemData[scope.row.supplementNo]"
          :key="scope.row.supplementNo"
        ></SupplementItemTable>
      </template>
    </el-table-column>

js :

 const itemList = await getSupplementItemList(data)
      // 这里一定要用set的方式处理数据，不然vue坚持不到数据变动不会重新渲染界面
this.$set(this.supplementItemData, supplementNo, itemList)