Ant Design of Vue 表格数据 重复渲染

Ant Design of Vue 表格数据 重复渲染

初次使用Ant Design of Vue 框架遇到表格数据重复渲染的解决办法
重要的都标注了
就是这样的表格

// 组件
<a-table
	:columns="columns"
	:data-source="mainDatas"
	class="components-table-demo-nested"
	bordered
	:pagination="pagination"
	@expand="clickExpand"  // 展开图标触发
	:expandedRowKeys="expandedRowKeys"   // 展开的行控制属性
	>
	<a-table
	  slot="expandedRowRender"
	  :columns="innerColumns"
	  :data-source="innerData"
	  :pagination="false"
	>
	</a-table>
</a-table>
// data
data() {
	return{
	  expandedRowKeys: [],
      mainDatas: [],
      innerData: [],
      }
   }
 // methods
 clickExpand(expanded, record) {
 // 点击展开图标时触发的函数
 
      if (expanded) {
        // 解决框架表格数据受污染
        this.expandedRowKeys = []
        this.expandedRowKeys.push(record.key)  // 加入当前展开的索引值
      } else {
        this.expandedRowKeys = []
      }

      this.innerData = []
      requestData({ }).then((res) => {
      // 获取请求数据
        let data = res
        data.forEach((e, i) => {
          this.innerData.push({
            key: i,
          })
        this.innerData =  Array.from(new Set(this.innerData)) // 数组去重
        })
      })
    },

1. 其实本质就是控制expandedRowKeys这个数组里面的加的索引值，有哪个索引值就展开哪个，多个就展开多个。
2. 自己总结的一些方法，欢迎指出不足，初用该框架，避坑。