Element-Plus表格:Table自定义合并行数据的最佳实践

“ 知行合一 ” —— 王阳明

在开发项目中,我们时常会用到表格,许多需求可能会要求自定义特定的行或列。
接下来,我们将探讨在实际开发中如何应对这一挑战。

本文案例采用的技术:

名称 版本
Vue3 ^3.5.12
element-plus ^2.8.8

知识点

我们先来复习下2个知识点,来自element-plus文档 table

1、自定义表头

通过设置 slot 来自定义表头。(只贴出重点代码)

<el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="Date" prop="date" />
    <el-table-column label="Name" prop="name" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button
          size="small"
          type
### Element Plus `el-table` 组件实现多合并Element Plus框架中的`el-table`组件支持通过自定义函数来控制哪些单元格应该被合并。对于基于特定属性值相同的合并的情况,可以利用`span-method`属性提供的回调函数。 当表格数据加载完毕后,在遍历每一的数据时判断相邻之间指定字段的内容是否相等;如果相等,则设置当前该列的高度跨越数(rowSpan),并将下一对应位置设为0表示隐藏[^1]。 下面是一个简单的例子用于说明如何根据某个属性(例如name)来进的自动合并: ```html <template> <div style="margin: 20px;"> <el-table :data="tableData" border :span-method="objectSpanMethod"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="amount1" label="数值 1"></el-table-column> <el-table-column prop="amount2" label="数值 2"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script setup lang="ts"> import { ref } from 'vue' const tableData = [ { date: "2016-05-03", name: "Tom", amount1: "1", amount2: "2", address: "No. 189, Grove St, Los Angeles" }, { date: "2016-05-02", name: "Tom", // 和上一条记录的名字一样 amount1: "2", amount2: "3", address: "No. 189, Grove St, Los Angeles" } ] // 定义一个对象用来存储每组连续相同项的数量 let countMap = new Map() function objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 1) { // 只处理第二列即'name'这一列 const currentValue = row[column.property]; let prevValue; if(rowIndex !== 0){ prevValue = tableData[rowIndex - 1][column.property]; } if(currentValue===prevValue){ // 如果当前值等于前一值则返回{ rowspan: 0, colspan: 0 },意味着这不会显示出来 return { rowspan: 0, colspan: 0 }; }else{ // 否则计算有多少个连续相同的元素并更新countMap映射表 let nextIndex=rowIndex+1; while(nextIndex<tableData.length && tableData[nextIndex][column.property]==currentValue){ nextIndex++; } countMap.set(`${rowIndex}-${columnIndex}`,nextIndex-rowIndex); return { rowspan: nextIndex-rowIndex , colspan: 1}; } } } </script> ``` 此代码片段展示了怎样创建一个具有合并功能的表格,并且指定了具体的逻辑去决定何时以及如何合并某些下的单元格。注意这里只针对"name"这个字段做了特殊处理,实际应用中可以根据需求调整条件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码喵匠

感谢打赏,我会继续分享哒!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值