Vue3 Antd 父子嵌套子表格

这篇具有很好参考价值的文章主要介绍了Vue3 Antd 父子嵌套子表格。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue3 Antd 父子嵌套子表格

父子嵌套子表格

目标1:可以点击多个父节点表格,正确显示子表格数据

目标2:父表格数据刷新重载,解决子表格数据不刷新问题

官方示例代码,以及效果
https://www.antdv.com/components/table-cn#components-table-demo-nested-table
Vue3 Antd 父子嵌套子表格
可以看到官方示例十分简单,使用了 <template #expandedRowRender> 插槽效果,并没有后续的示例

 <template #expandedRowRender>
      <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'state'">
            <span>
              <a-badge status="success" />
              Finished
            </span>
          </template>
          <template v-else-if="column.key === 'operation'">
            <span class="table-operation">
              <a>Pause</a>
              <a>Stop</a>
              <a-dropdown>
                <template #overlay>
                  <a-menu>
                    <a-menu-item>Action 1</a-menu-item>
                    <a-menu-item>Action 2</a-menu-item>
                  </a-menu>
                </template>
                <a>
                  More
                  <down-outlined />
                </a>
              </a-dropdown>
            </span>
          </template>
        </template>
      </a-table>
    </template>

解决方案

使用@expand事件解决

     <a-table @expand="rowExpand" :loading="tableLoading" @change="tableChange"
                   :pagination="tablePagination" :columns="columns" :data-source="financeData"
                   :scroll="{ x: 1300, y: 1000 }" class="components-table-demo-nested"
                   :rowKey="(record,index)=>{return record.id}" bordered>
            <template  #expandedRowRender="{record}">
              <a-table :columns="innerColumns" :data-source="innerDataMap[record.id]" :rowKey="(record,index)=>{return record.id}"
                       :pagination="false">
              </a-table>
            </template>
              <span class="table-operation" @click="handleFinance(record)">
                <a-button type="link">处理
                 <template #icon><EditTwoTone/></template>
                </a-button>
              </span>
            </template>
          </a-table>

Vue3 Antd 父子嵌套子表格

首先我们需要一个const expandedRowKeys = ref([]) 一个列表临时存储点击展开的节点。

@expand=“rowExpand” 方法,监听展开的节点,把节点添加到缓存对象中

    function rowExpand(isExpand, record) {
      //提前为map.key =value 初始化一个空数组
      if (!innerDataMap.value[record.id]) {
        innerDataMap.value[record.id] = [];
      }

      if (isExpand) {
        // 将展开的行的 id 添加到 expandedRowKeys 数组中
        expandedRowKeys.value.push(record.id);

        // 将对应的子表格数据添加到 innerDataMap 中
        innerDataMap.value[record.id] = record.clist;
      } else {
        // 将展开的行的 id 从 expandedRowKeys 数组中删除
        const index = expandedRowKeys.value.indexOf(record.id);
        if (index > -1) {
          expandedRowKeys.value.splice(index, 1);
        }

        // 将对应的子表格数据从 innerDataMap 中删除
        delete innerDataMap.value[record.id];
      }

    }

可以看到嵌套子表格使用innerDataMap是一个Map而不是List,好处是,表格行数据更新,或者点击表格上方查询表格时,可以根据Map[Key]的方式刷新子表格数据

        <template  #expandedRowRender="{record}">
              <a-table :columns="innerColumns" :data-source="innerDataMap[record.id]" :rowKey="(record,index)=>{return record.id}"
                       :pagination="false">
              </a-table>
            </template>

点击处理按钮,修改当前父表格下子表格数据,这时候需要回调reload()重新加载表格,由于使用expandedRowKeys参数记录展开节点,只需要在请求父表格接口时候遍历更新innerDataMap容器就可以了。文章来源地址https://www.toymoban.com/news/detail-428449.html

reload(){
    queryIList(toData)
      .then((res) => {
        financeData.value = res['list']
        tablePagination.total = res.totalCount
        // 获取当前展开的所有行的 ID
        const expandedRowIds = expandedRowKeys.value;

        // 遍历展开的行,更新对应的子表格数据
        expandedRowIds.forEach(id => {
          const record = financeData.value.find(record => record.id === id);
          if (record) {
            innerDataMap.value[id] = record.clist;
          }
        });
      })
      .catch((e) => {
        console.log('e', e);
      }).finally(() => {
      tableLoading.value = false
});

}

到了这里,关于Vue3 Antd 父子嵌套子表格的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板

    大家好,我是yma16,本文分享利用inscode搭建vue3(ts)+antd前端模板。 2023 新星计划 vue(ts)+antd赛道报名入口:https://bbs.csdn.net/topics/616574177 搭建vue3+ts+antd的指引:认识vite_vue3 初始化项目到打包 InsCode 是一个一站式的软件开发服务平台,从开发-部署-运维-运营,都可以在 InsCode 轻松

    2024年02月16日
    浏览(47)
  • 【vue3】vue3中父子组件传参:

    一、父传子: 【1】父组件传值: 【2】子组件接收: 二、父调用子方法: 【1】父组件调用: 【2】子组件暴露: 三、子组件发送emit方法给父组件: 【1】父组件: 【2】子组件调用:

    2024年02月13日
    浏览(38)
  • table 单元格中嵌套子表格 样式撑开问题

    如图,表格中的td嵌套表格,里边表格把外层撑开,不能按100%显示; 给父级table 加一个 table-layout:fixed; 样式

    2024年02月09日
    浏览(33)
  • vue3-父子组件间通信

    在实际业务开发的过程中,我们时常会遇到组件间的通信问题,比如:父子组件间通信、同级组件间通信等。本篇文章中主要介绍父子组件间通信。父子组件间通信主要有以下常见形式: 方案 父组件向子组件 子组件向父组件 props/emits props emits v-model/emits v-model emits ref/emits

    2024年02月05日
    浏览(61)
  • VUE3父子组件传参

    父传子 父组件 template    sonComponent :sendValue=\\\"value(//传递的值)\\\"/sonComponent /template //引入组件 import sonComponent from \\\"XXXXX\\\"; 子组件 //定义名字与父组件对应 const props = defineProps({   sendValue:{type: String,default:\\\'\\\'}  }) 子传父 子组件 // 定义发送 const emit = defineEmits([\\\'sendValue\\\']) //发送(在想

    2024年02月07日
    浏览(42)
  • vue3 父子组件传值 记录

    最近这个组件之间传值用的较多,我这该死的记性,总给忘记写法,特此记录下 补充:LeftView.vue 是父组件; Video.vue 是子组件 Video.vue 子组件 LeftView.vue 父组件 第一步 创建bus.js文件 第二步 分别在需要相互传参的组件中引入bus.js文件,并相互传参

    2024年02月11日
    浏览(43)
  • Vue3父子组件相互调用方法

    下面演示均为使用 setup 语法糖的情况! 参考网址:https://cn.vuejs.org/api/sfc-script-setup.html#defineexpose 子组件需要使用defineExpose对外暴露方法,父组件才可以调用! 1.子组件 2.父组件 3.测试结果 1.父组件 2.子组件 3.测试结果 今天的分享就到这里啦~~ 如有错误,欢迎随时雅正。

    2024年02月11日
    浏览(53)
  • vue3 父子传值的使用

    父传子:   setup语法糖的写法:    子传父:   setup语糖的写法:    

    2024年02月10日
    浏览(40)
  • VUE3+TS(父子、兄弟组件通信)

    目录 父传子值、方法(子调用父值、方法) 子传父值(父调用子值) 父读子(子传父)(父调用子值、方法) 兄弟(任意组件)通信 引入Mitt来完成任意组件通信 1、统一规范写法,通过在子组件标签上绑定属性和值,来传递到子组件,子组件再通过defineProps来接收,先给其

    2023年04月08日
    浏览(47)
  • vue3父子组件相互调用方法详解

    在vue3项目开发中,我们常常会遇到父子组件相互调用的场景,下面以setup语法糖格式详细聊聊父子组件那些事儿。

    2024年02月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包