关于vue.js:vue-antd-UI-table表格展开行展开多行共存

33次阅读

共计 1586 个字符，预计需要花费 4 分钟才能阅读完成。

背景：我的项目中须要 table 开展的操作；查看其余文章说只能保留一个开展的内容；实测是能够多个的

业务中须要开展行的操作；依照 antd 官网的写法；并没有实现本人的成果；查 github 材料后失去了想要的后果；间接上代码吧

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

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 = []}
}

正文完