Elment Plus表格展開行後，進行修改資料後展開行自動收起

場景：

在使用Element Plus中的table元件展示資料時，由於需要對錶格行內資料的資料進行修改，在展開行內放置了一個輸入框元件，但是在每次輸入框輸入時，展開行就會自動收起。

解決方法：

首先我們明確一點就是：在資料發生改變時是會引起表格的重新渲染的。

這裡需要使用table元件的兩個屬性：row-key、expand-row-keys

row-key：

expand-row-keys：

row-key有點類似於選擇器元件的value屬性，expand-row-keys則類似於選擇器元件內多選的陣列。我們需要通過在expand-change

demo

<template>
 <div>
  <el-table
   :row-key="
    (row) => {
     return row.recordId
    }
   "
   :expand-row-keys="expandedRowKeys"
   :data="tableData"
   @expand-change="expandOpen"
  >
   <el-table-column type="expand">
    <template #default="{ row }">
     <el-input v-model="row.title"></el-input>
    </template>
   </el-table-column>
   <el-table-column
    v-for="column in tableColumns"
    :key="column.prop"
    v-bind="column"
   ></el-table-column>
  </el-table>
 </div>
</template>
​
<script lang="ts">
import { defineComponent, ref } from 'vue'
​
export default defineComponent({
 setup() {
  const expandedRowKeys = ref<string[]>([]),
   remove = function (array: any[], val: any) {
    const index = array.indexOf(val)
    if (index > -1) {
     array.splice(index, 1)
     return true
     }
    return false
    },
   expandOpen = async (row: any, expand: any) => {
    console.log(row, expand)
    if (!remove(expandedRowKeys.value, row.recordId)) {
     expandedRowKeys.value.push(row.recordId)
     }
    //業務實現
    },
   tableData = ref([
     {
     date: '2016-05-03',
     name: 'Tom',
     address: 'No. 189, Grove St, Los Angeles'
     },
     {
     date: '2016-05-02',
     name: 'Tom',
     address: 'No. 189, Grove St, Los Angeles'
     },
     {
     date: '2016-05-04',
     name: 'Tom',
     address: 'No. 189, Grove St, Los Angeles'
     },
     {
     date: '2016-05-01',
     name: 'Tom',
     address: 'No. 189, Grove St, Los Angeles'
     }
    ]),
   tableColumns = [
     { prop: 'date', label: 'Date', width: '180' },
     { prop: 'name', label: 'Name', width: '180' },
     { prop: 'address', label: 'Address', width: '180' }
    ]
​
  return { expandOpen, expandedRowKeys, tableData, tableColumns }
  }
})
</script>
​
<style scoped></style>
​