vue antd UI table表格实现展开单行与展开多行共存

前端开发项目中需要table展开的操作,查看其他文章说只能保留一个展开的内容,实测是可以多个的,在查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>

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

实现效果:

vue antd UI table表格实现展开单行与展开多行共存

原文:点击这里

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » vue antd UI table表格实现展开单行与展开多行共存

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们