vue - antd UI table表格展開行+展開多行共存

songxianling1992 發表於 2022-06-14
Vue
背景:專案中需要table展開的操作;檢視其他文章說只能保留一個展開的內容;實測是可以多個的

要的效果

image.png
業務中需要展開行的操作;按照antd官網的寫法;並沒有實現自己的效果;查github資料後得到了想要的結果;直接上程式碼吧

html結構程式碼

# advance-table 是自己2次封裝的table元件;實際中直接用a-table就行了
<advance-table
      class="m-t-10"
      bordered
      :scroll="{ x:'100%',y: tableY }"
      :columns="columns_customer_complaint"
      :data-source="tableData"
      :loading="loading"
      :rowKey="(row,index) => row.recordId"
      :pagination="pagination"
      @change="handleTableChange"
      @expand="expandedRowRender" # 這個方法是展開行的回撥方法
      :expandedRowKeys.sync="expandedRowKeys" # 這個屬性很重要;就是用它來控制某行是否展開和收起;分頁再次獲取資料的時候;也要把它給置空陣列;裡面的每項對應rowKey返回的recordId
    >
      <advance-table
        slot="expandedRowRender"
        slot-scope="{text, record}"
        style="width: 30%;padding: 10px 0;"
        :columns="columns_customer_complaint_inner"
        :data-source="record.innerData" # 這個資料來源;做法是往每一項裡面都增加一個innerData來用作展開行裡面的資料
        :pagination="false"
        :showToolbar="false"
      >
      <template slot="dealwithProgress" slot-scope="{text, record}">
        {{record.dealwithProgress === 1 ? '進行中' : record.dealwithProgress === 5 ? '已完成' : record.dealwithProgress === 0 ? '待處理' : ''}}
      </template>
      </advance-table>
    </advance-table>

JS程式碼

data(){
    return {
        # ...其他程式碼
        tableData: [],
        expandedRowKeys: [],
    }
},
methods: {
    // 展開行的回撥方法
    async expandedRowRender(expanded, record) {
      const { recordId, rowKey } = record
      const { data } = await Api.CustomerServiceRecordLogList({ recordId })
      // 獲取資料後放到外層tableData裡面的innerData屬性身上
        this.$set(this.tableData[rowKey], 'innerData', data)
      // 操作當前行是否展開;通過裡面有無`recordId`進行邏輯操作    
      if (this.expandedRowKeys.includes(recordId)) {
        this.expandedRowKeys.splice(this.expandedRowKeys.findIndex(f => f === recordId), 1)
      } else {
        this.expandedRowKeys.push(recordId)
      }
    },
    async getData(){
        // 其他程式碼
        // 重新獲取tableData資料後;將展開行id陣列置空
        this.expandedRowKeys = []
    }
}

實現效果

image.png