iview表格expand的使用方法

實現樣式

實現方法

table

    <Table
      ref="table"
      :columns="cloumns"
      :data="data"
      @on-selection-change="selectTable"
    >
    </Table>

cloumns

cloumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(TableExpand, {
              ref: `tableItem${params.index}`, // 定義ref用於執行子組件的方法
              props: {
                row: params.row.childrenList,
                taskList: this.taskList,  
                guildNameMap: this.guildNameMap
              },
              on: {
                updateRow: (rowData) => {
                  this.updateData(params.index, rowData) // 子組件可以執行父組件的方法
                }
              }
            })
          }
        },
        ...
       ]

通信

// TableExpand
 updateRow () {
      this.$emit('updateRow', this.data);
 }
// Table
// 需要更新下數據
 assignData.forEach(unit => {
    unit.childrenList = this.$refs.table.$refs.tbody.$refs[`tableItem${unit.index}`].getData
 })