vue3 + element plus el-table expand 实现按钮展开行 且在展开时查询数据

这篇文章介绍了如何在Vue的el-table组件中通过修改CSS隐藏默认的展开图标,并添加自定义的展开按钮。通过绑定ref和事件处理函数handleDetails来实现行展开,并在每行中添加expendList属性存储展开数据,使用Service获取并设置展开数据,最后利用toggleRowExpansion方法控制行的展开和折叠。
摘要由CSDN通过智能技术生成

通过点击详情按钮展开行而不是左侧的小图标
在这里插入图片描述

  1. 首先把左侧的小图标隐藏调 给type="expand"列 设置 width="1"
    这个时候还有一点小图标 在css中加入代码 :deep(.el-table__expand-icon) { display: none; }即可隐藏

  2. 隐藏后expand-change会失效,所以我们在每行中加上按钮

            <el-table-column label="操作" width="160" align="center">
              <template #default="scope">
                <el-button size="small" @click="handleDetails(scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
  1. el-table绑定ref来获取这个方法,同时绑定每行的展开行数据来源props.row.expendList
    完整HTML代码如下
          <el-table
            ref="revRef"
            :data="tableData.list"
            :max-height="300"
            row-key="id"
          >
            <el-table-column type="expand" width="1">
              <template #default="props">
                <el-table:data="props.row.expendList">
                  <el-table-column prop="id" label="序号" align="center"></el-table-column>
                  <el-table-column label="编号" prop="number" />
                  <el-table-column label="任务类型" prop="type" />
                  <el-table-column label="创建时间" prop="createTime" />
                  <el-table-column label="开始执行时间" prop="beginTime" />
                  <el-table-column label="完成时间" prop="doneTime" />
                </el-table>
              </template>
            </el-table-column>
            <el-table-column prop="id" label="序号" width="100" align="center"></el-table-column>
            <el-table-column label="名称" prop="name" />
            <el-table-column label="城市" prop="city" />
            <el-table-column label="地址" prop="address" />
            <el-table-column label="操作" width="160" align="center">
              <template #default="scope">
                <el-button size="small" @click="handleDetails(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
  1. 通过官方文档可以看toggleRowExpansion这个属性,利用这个属性一样可以实现行的展开折叠效果
    为了避免展开行数据重复,我们在每行中加入新属性expendList存放展开行数据,与表格中的数据来源相对应,js代码如下
    在这里插入图片描述
	const revRef = ref();
    function handleDetails(row) {
     Service.getList(row.id).then((res) => {
       row["expendList"] = res.data;
       revRef.value.toggleRowExpansion(row);
     });
   }

这样就完成啦!

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值