Elment UI表格展开行，进行tableData数据修改后展开行自动收起

踩坑记录：在使用Elemen UI的table组件展示数据时，使用了【type="expand"】由于需要对表格行内数据的数据进行修改，在展开行内放置了一个switch组件，但是在第一次修改switch状态时，展开行就会自动收起，后续修改不会收起。

背景

<el-table
    v-loading="loading"
    element-loading-text="拼命加载中"
    :data="errLogs"
    border
>
    <el-table-column type="expand">
        <template slot-scope="props">
            {{ props.row.showJson }}
            <el-switch
                v-model="props.row.showJson"
                active-text="JSON"
            />
        </template>
    </el-table-column>
    <el-table-column label="id" prop="id" width="100" />
</el-table>

展开行，直接修改switch状态，正常情况下会开启switch；然而现在的情况是 switch 会改变成开启状态，但是展开行自动合并起来了！

问题

switch 状态修改完成，展开行自动收起

原因

table在数据发生改变时会引起表格的重新渲染!

解决问题

这里需要使用table组件的两个属性：row-key、expand-row-keys,一个事件expand-change

思路：通过添加row-key当作唯一值，使用expand-row-keys数组来控制expand的展开收起

实现

<el-table
    v-loading="loading"
    element-loading-text="拼命加载中"
    :data="errLogs"
    border
    :row-key="(row) => {return row.id}" // 设置唯一row-key
    :expand-row-keys="expandedRowKeys" // 展示行
    @expand-change="expandOpen" // 展开收起事件
>
    <el-table-column type="expand">
        <template slot-scope="props">
            {{ props.row.showJson }}
            <el-switch
                v-model="props.row.showJson"
                active-text="JSON"
            />
        </template>
    </el-table-column>
    <el-table-column label="id" prop="id" width="100" />
</el-table>

<script>
export default {
    data() {
        expandedRowKeys: [] //当前展开行的row-key
    },
    methods: {
        获取展开行row-key
        expandOpen(row, expand) {
            this.expandedRowKeys = expand.map(v => v.id)
        },
    }
}
</script>