el-table 合并相同行并动态输入和插入行

本文介绍了如何使用Vue.js和TypeScript实现一个复杂的表格功能,包括根据订单ID、机台ID和物料ID动态合并行,并在特定列中允许用户输入。通过`:span-method`属性设置合并方法,并通过`:cell-style`自定义单元格样式来实现不同背景色。此外,还涵盖了在表格中添加插入行功能的操作。
摘要由CSDN通过智能技术生成

浅记一下花了点时间实现的表格(也许有bug)

1.实现该表格效果,第0-4列根据订单id合并相同项,第5-7列根据机台Id合并相同项,第8-11列根据物料的ID合并相同项,12-15列可输入(具体输入内容之前的计算关系就不记了)

table框架就不放了,简单几个合并方法 :span-method="arraySpanMethod"

const arraySpanMethod = ({
    row,
    column,
    rowIndex,
    columnIndex,
}: SpanMethodProps) => {
    // 合并行  inId相同合并、合并第一列,所以合判断columnIndex是否等于0
    if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
        if (rowIndex === 0 || row.inId != tableData.value[rowIndex - 1].inId) {
            let rowspan = 0;
            tableData.value.forEach((element: any) => {
                if (element.inId ==&
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值