Elment Plus表格展開行后，進行修改數據后展開行自動收起

場景：

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

解決方法：

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

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

row-key：

expand-row-keys：

 

row-key有點類似於選擇器組件的value屬性，expand-row-keys則類似於選擇器組件內多選的數組。我們需要通過在expand-change事件中對expand-row-keys這個數組進行操作來達到控制expand是否展開的目的。

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>
​