Ant Design Vue—Collapse折叠面板嵌套表格数据污染

一、背景

1. 实现折叠面板嵌套表格，打开折叠面板显示表格，允许打开多个面板。
2. 最初的设计，折叠面板通过v-for循环遍历list数据，把遍历到的数据显示在折叠面板上边，打开折叠面板的表格中的数据是根据当前面板的id去调用接口获取的数据，所以表格中的data-source是每次打开面板生成的数据。
3. 出现的问题：每次新打开一个面板中显示的表格数据会覆盖之前打开的面板中的表格数据，数据被污染。

二、实现

Ant Design Vue—Collapse折叠面板官方文档

1. 每次打开折叠面板获取到的表格数据添加到折叠面板的list一个属性中。
2. 表格中的data-source从折叠面板的list中取值，解决data-source被污染问题。
3. 注意：vue由于javascript的限制，不能够直接检测到给数组赋值，也不能对该数组进行长度的赋值，如果改变数据时没有使用push()、pop()、shift()、unshift()、splice()、sort()、reverse()，而是直接赋值的话，在修改完数据以后使用this.$forceUpdate()迫使 Vue 实例重新渲染。否则就会出现，数据明明发生了改变，但是表格没有显示数据。

三、Ant Design Vue—Collapse折叠面板其他问题

1. 页面跳转后，打开的折叠面板都折叠起来：使用v-model="activeKey ，页面跳转后，把activeKey置空。

！！！切记：activeKey的类型为string[]或string，要不打不开折叠面板。
爬坑血泪教训！！！是我太菜！！！
我不想再看见折叠面板了，一点也不想！！！

<a-collapse @change="changeActivekey" v-model="activeKey">
	<a-collapse-panel v-for="(item) in list" :key='(item.id).toString()'>
	</a-collapse-panel>
</a-collapse>
 
 此时的activeKey 和(item.id).toString()相等
分页：
this.activeKey = [];

2. 修改面板箭头位置:expandIconPosition='right'