element表格列合并、行合并、表头合并以及自定义校验规则和表格内部form表单的校验

最新推荐文章于 2024-08-13 23:10:15 发布
最新推荐文章于 2024-08-13 23:10:15 发布
阅读量1.1k 收藏 4
点赞数 1
文章标签： vue java javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52889573/article/details/121374520
版权

element表格列合并、行合并、表头合并

话不多说，先上图！
在这里插入图片描述
首先咱们可以看到一个比较复杂的表格，在element的基本使用中是找不到这种情况的。这张截图只是截了一点，没有截图完全。
在这里插入图片描述

可以看上面这张图，每一个红框就是一个el-table-column，你可以根据你的项目看看需要多少个。
在这里插入图片描述
横着框的这几个相邻单元格的table-column的名称为了区别我们尽量将他们定义为一样得名称。
在这里插入图片描述

objectSpanMethod({row, column, rowIndex, columnIndex }) {
      // console.log(row, column)
      //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      if (rowIndex === 0 && columnIndex === 0) {
      //  0，0是从第一个单元格开始，需要注意的是，他是不考虑表头的，也就是我们第一张图上的损失情况和路基的交汇处。
        return {
          rowspan: 14, //要合并的行数
          colspan: 1
        }
      }
      if (rowIndex !== 0 && rowIndex !== 14 && columnIndex === 0) {
        return {
          rowspan: 0, //要合并的行数
          colspan: 0
        }
      }
      //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      // 好，现在看我们的波浪线区间的这两块代码
      // 先看0，0的情况，我们是吧0，0单元格的行数给他扩展到了14行，那么如果没有下面那个if判断条件语句的话表格会多出来14行
      // 因此我们需要把2-14行的row行数把他置为0，这样第15行就会回到本该呆在的位置，表格也不会突出一部分。
      // 后面的这些也是万变不离其宗，也是我合并的其他单元格，大家看看就好。
      if (rowIndex === 14 && columnIndex === 0) {
        return {
          rowspan: 4, //要合并的行数
          colspan: 1
        }
      }
      if (
        (rowIndex === 0 || rowIndex === 6 || rowIndex === 7 || rowIndex > 9) &&
        columnIndex === 1
      ) {
        return {
          rowspan: 1,
          colspan: 2
        }
      }
      if (
        (rowIndex === 0 || rowIndex === 6 || rowIndex === 7 || rowIndex > 9) &&
        columnIndex === 2
      ) {
        return {
          rowspan: 0,
          colspan: 0
        }
      }
      if (rowIndex === 1 && columnIndex === 1) {
        return {
          rowspan: 3,
          colspan: 1
        }
      }
      if (rowIndex > 1 && rowIndex < 4 && columnIndex === 1) {
        return {
          rowspan: 0,
          colspan: 0
        }
      }
      if ((rowIndex === 4 || rowIndex === 8) && columnIndex === 1) {
        return {
          rowspan: 2,
          colspan: 1
        }
      }
      if ((rowIndex === 5 || rowIndex === 9) && columnIndex === 1) {
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    }

好的，这样的话我们的表格内容的行和列就合并完成了，但是表头的合并还没有做，这个方法也获取不到表头单元格，然后我去找了一下element的文档，发现也没有说明，只是告诉了嵌套表头的方法，最后还是依靠着原生JS解决问题！

// 获取表头的所有单元格
        var x = document.getElementsByClassName('el-table__header')[0].rows[0].cells
        // 将第二列表头单元格的colSpan设为2
        x[0].colSpan = 3
        x[4].colSpan = 2
        x[6].colSpan = 2
        // 将第三列表头单元格的display设为none
        x[1].style.display = 'none'
        x[2].style.display = 'none'
        x[5].style.display = 'none'
        x[7].style.display = 'none'

好了，这点代码我想就不用多说了，对各位大神来说那是so easy 啦，我也是第一次做这种表格，所以没找到有什么特别好的方法，只是把我怎么实现的写出来了，如果有更简单的方法希望可以留言讨论一下。

自定义校验规则和表格内部的表单校验

相信大家做系统的时候也会遇到这种表格内部输入框的问题，平常的表单校验是比较简单的，element都给写好了，那么这种表格内部的表单是怎么校验的呢我们一起看一看。

// 这里为了清晰明了看见我们就准备了一个el-table-item，
// 通过view我们是可以看到table外面是需要一个form表单包裹着的，并且在数据里面我们table渲染所需要的数组也是放在form表单里面的。
// 其次就是注意看form的model和table的data的写法。
<el-form
        :model="dataForm"
        :rules="dataRule"
        label-width="90px"
        ref="dataForm"
        size="mini"
      >
        <el-table
          :data="dataForm.reportWeekWaterInfoDTO"
          border
          style="width: 100%"
          :span-method="objectSpanMethod"
        >
        // 好的，form和table的架子搭好了，就可以定义需要校验的字段了。
        // 我们看下面的el-form-item这块，写了prop和rules两个属性通过表格的scope.$index来区分每行的同一个字段名
        // 再从下方的datarules里面写好对应的校验规则即可。
          <el-table-column
            header-align="center"
            align="center"
            label="灾毁数量"
          >
            <template slot-scope="scope">
              <el-form-item
                label-width="0"
                :prop="
                  'reportWeekWaterInfoDTO.' + scope.$index + '.damageCount2'
                "
                :rules="dataRule.damageCount2"
                v-if="
                  scope.row.date == '立方米/公里' ||
                  scope.row.date === '平方米/公里' ||
                  scope.row.date === '立方米/处' ||
                  scope.row.date === '处/条'
                "
              >
                <el-input
                  v-model="scope.row.damageCount2"
                ></el-input></el-form-item
              ><span v-else>-</span>
            </template>
          </el-table-column></el-table
        >
      </el-form>


// data部分
  data() {
    const isMoney = (rule, value, callback) => {
      const percent = /^\d*(?:\.\d{0,10})?$/
      if (!percent.test(value)) {
        return callback(new Error('必须为数字类型'))
      } else {
        callback()
      }
    }
    return {
      visible: false,
      dataForm: {
        // Edit: 'add',
        id: undefined,
        organizeId: undefined,
        startTime: '',
        endTime: '',
        reportWeekWaterInfoDTO: [
          {
            date: '立方米/公里',
            type: '损失情况',
            type1: '路基',
            itemName: '路基',
            itemCode: 1,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          },
          {
            date: '平方米/公里',
            type: '损失情况',
            type1: '路面',
            itemName: '沥青路面',
            itemCode: 2,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          },
          {
            date: '平方米/公里',
            type: '损失情况',
            type1: '路面',
            itemName: '水泥路面',
            itemCode: 3,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          },
          {
            date: '平方米/公里',
            type: '损失情况',
            type1: '路面',
            itemName: '砂石路面',
            itemCode: 4,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          },
          {
            date: '座',
            type: '损失情况',
            type1: '桥梁',
            itemName: '全毁',
            itemCode: 5,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          },
          {
            date: '座',
            type: '损失情况',
            type1: '桥梁',
            itemName: '局部毁',
            itemCode: 6,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          },
          {
            date: '道',
            type: '损失情况',
            type1: '隧道',
            itemName: '隧道',
            itemCode: 7,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          },
          {
            date: '道',
            type: '损失情况',
            type1: '涵洞',
            itemName: '涵洞',
            itemCode: 8,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          },
          {
            date: '处',
            type: '损失情况',
            type1: '防护工程',
            itemName: '护坡',
            itemCode: 9,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          },
          {
            date: '处',
            type: '损失情况',
            type1: '防护工程',
            itemName: '驳岸、挡墙',
            itemCode: 10,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          },
          {
            date: '立方米/处',
            type: '损失情况',
            type1: '坍塌方',
            itemName: '坍塌方',
            itemCode: 11,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          },
          {
            date: '处/条',
            type: '损失情况',
            type1: '公路中断',
            itemName: '公路中断',
            itemCode: 12,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          },
          {
            date: '万元',
            type: '损失情况',
            type1: '其他灾毁损失',
            itemName: '其他灾毁损失',
            itemCode: 13,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          },
          {
            date: '万元',
            type: '损失情况',
            type1: '损失合计',
            itemName: '损失合计',
            itemCode: 14,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          },
          {
            date: '处/条',
            type: '抢通情况',
            type1: '已抢通公路',
            itemName: '已抢通公路',
            itemCode: 15,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          },
          {
            date: '人',
            type: '抢通情况',
            type1: '已投入人力',
            itemName: '已投入人力',
            itemCode: 16,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          },
          {
            date: '台班',
            type: '抢通情况',
            type1: '已投入机械',
            itemName: '已投入机械',
            itemCode: 17,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          },
          {
            date: '万元',
            type: '抢通情况',
            type1: '已投入资金',
            itemName: '已投入资金',
            itemCode: 18,
            damageCount: 0,
            damageCount2: 0,
            waterDamageCount: 0,
            waterDamageCount2: 0,
            damageAmount: 0,
            waterDamageAmount: 0
          }
        ]
      },
      dataRule: {
        damageCount: [{ validator: isMoney, trigger: 'blur' }],
        damageCount2: [{ validator: isMoney, trigger: 'blur' }],
        waterDamageCount: [{ validator: isMoney, trigger: 'blur' }],
        waterDamageCount2: [{ validator: isMoney, trigger: 'blur' }],
        damageAmount: [{ validator: isMoney, trigger: 'blur' }],
        waterDamageAmount: [{ validator: isMoney, trigger: 'blur' }]
      },
    }

最后，element表格列合并、行合并、表头合并以及表格内部form表单的校验的问题就解决了希望能帮助到您，有错误或不规范的也希望您能指出，也欢迎大家跟我一起交流学习。

多喝烫水_
关注
element-UI表格table实现表格行的动态合并
12-04 1万+
本文主要举个项目中真实实例，方便各位跟我一样在实际项目开发中碰到的需求功能的开发。（可直接拿来使用的） 饿了么table组件官方实例：http://element-cn.eleme.io/#/zh-CN/component/table，在实际开发过程中，官方实例根本无法满足需求，实际需求一般都是动态的合并而不是固定怎么合并的，所以这时就需要我们对其进行处理。 大致思路就是：先将查询出的列表数据...
Element-UI组件之表单Form
TwentyOne__的博客
07-03 5500
Element-UI组件之表单FormRadio 单选框基础用法禁用状态单选框组按钮样式带有边框Checkbox 多选框基础用法禁用状态多选框组indeterminate 状态可选项目数量的限制按钮样式带有边框Input 输入框基础用法禁用状态可清空密码框带 icon 的输入框文本域可自适应文本高度的文本域复合型输入框尺寸带输入建议自定义模板远程搜索输入长度限制 Radio 单选框 基础用法 &...
elementui表格合并列和合并行
瘦瘦瘦大人的博客
11-12 2214
element ui表格合并
深入探索 ElementUI el-table 行列合并
最新发布
繁依Fanyi的博客
08-13 2296
在前端开发中，数据展示一直是一个重要的部分，而表格则是数据展示最常见的形式之一。ElementUI 是饿了么前端团队推出的一款基于 Vue 的 UI 组件库，其中的 el-table 组件是一个功能强大且灵活的表格组件。今天我们要详细探讨的是 el-table 的行列合并操作。
elementUI中表格单元格合并（拿来即用）
Muchen灬
08-12 5119
elementUI中表格单元格合并 <!-- * @Description: elment table表单合并单元格 * @Version: * @Autor: Muchen * @Date: 2021-08-12 09:38:08 * @LastEditors: Muchen * @LastEditTime: 2021-08-12 10:40:13 --> <template> <div class="app-container home">
vue3+ts+elementPlus合并表头
m0_66962220的博客
04-19 1531
如果你要实现合并表格单元格，你可以使用以上代码，用一个<el-table-column>把要合并其他列包在里边，效果如下
vue3 element-plus 实现 table表格合并单元格 和 多级表头
lzfengquan的博客
06-21 2785
实现合并单元格和多级表头 可以直接用官网提供的写法，但是有可能数据会比较多的时候，就需要我们稍微改造一下，方便以后再出现合并的数据，直接可以公用。注意的项是 要和并的字段不一样，我们需要单独去设置；spanMethod 方法会根据 设定的 merge 值去合并；spanArr 方法执行计算属性，添加我们的判断条件。注意的是，可能需求不同，但是方法是一样的。只需要把方法中的值替换即可实现公用。满足条件的进行合并，不满足的则是单独一行展示。表格的数据布局 index.vue。数据的映射config.ts 页面
Vue表单验证实例：el-form配合rules实现数据校验
在Vue中，实现表单数据验证是确保用户输入数据有效...通过以上分析，我们可以看到如何在Vue应用中有效地使用`el-form`和自定义的验证规则来确保用户输入的数据质量。这不仅增强了用户体验，也提高了数据处理的准确性。
vue+elementUI实现自定义表单模板组件（二）
weixin_43930421的博客
05-31 1136
前言 在上一节主要解决了表单模板的创建问题，在数据库中的存储格式为字符串。 主要是通过前端处理，保存为 json 数组的字符串，形如 [ { label:"文本", required:true, type:"text", icon:"el-icon-s-tools", placeholder:"", _vModel:"field0" } ] 再通过 JSON.stringify() 转为 json 串后存入数据库。 有了表单模板之后，如何在前端进行呈现并编辑，这一节就理清这一思路。 表
轻松解决element UI 表单重置问题
小白菜的博客
06-29 4276
三步解决前言一、从ui框架入手二、上手表单1.设置表单初始值2.表单初始化赋值以及一些通用参数3.给表单抽屉/弹窗设置open方法总结 前言 在后台管理系统中，最常见的业务就是CURD，对数据进行增删改，通常情况下新增与编辑我们会做成一个通用组件，我们在不使用v-if的情况下如何重置我们的表单呢？ 技术栈：vue3.0 + elementPlus 一、从ui框架入手 方法名 说明 resetFields 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 clearValida
Element from表单，显示表单项完成数量
m0_50929144的博客
11-24 611
Element from表单，显示表单项完成数量 思路：给每一个表单项添加watch监听，如果通过校验那么就让这项对应的 rulesState 属性变为 true，最后监听rulesState的变化（立即监听是为了初始化页面展示 0/x），rulesState 中 true 的数量就是完成的数量。 vue2.x html: <script src="//unpkg.com/vue@next"></script> <script src="//unpkg.com/eleme
element-plus表格组件合并表头并自定义列内容踩坑记录
qq_36877078的博客
03-23 774
目标，实现如下表格 踩坑记录 合并表头后，不需要显示出来的二级表头怎样给隐藏掉？ 合并表头后，在二级el-table-column中获取不到scope.row了，获取到的是个{} 话不多说，直接上代码
Element表格之表头合并、行合并和列合并
szzlh123456789的博客
05-17 2588
要进行表格合并，关键在于你要对数据渲染的前进行判断处理，在这里，首先要在table中写入:span-method=‘objectSpanMethod’,然后在js部分写上方法。这里主要使用到:header-cell-style="handerMethod"和:span-method="spanMethod"用来合并行和列。这里判断的方式就有些不同了。列合并相对于行合并要简单，但是要确定好你要合并哪一行，如果表格是固定的，就轻松多了，只要给对应的那几行进行合并即可。-cell-style对表头做了一些处理。
重生之我在公司写elementPlus vue3的合并列以及多级表头单行展示
qq_41605935的博客
12-24 594
多级table展示一行，动态合并列
elementui表格单元格合并及表头单元格合并以及表头斜线分隔
CH-EN.的博客
09-29 4115
elementui表格单元格合并及表头单元格合并 页面效果如下 代码 html部分 <base-table default-height="true" class="numTable sorTable noTableBorder" :border-style="true" :columns="column" :data-source="numTable" :loading="l
el-table合并行，列
小小小猿
04-02 160
【代码】el-table合并行，列。
Vue+elementUI的el-table组件，合并单元格，勾选之后，复制、新增、删除、批量复制、批量删除功能
weixin_45926119的博客
04-22 1618
注：N20是我们公司自己封装的组件，但是底层还是elementUI，结构并不是很重要，主要是结构上的:span-method="objectSpanMethod"方法。5）、表格里面也有新增和删除功能，删除是删除当前行，新增是新增到当前行的下面，并且前面列动态合并，序号也重新排序；4）、勾选复选框，点击复制，复制所选的数据到列表最下方，并且序号重新排序；3）、批量删除，勾选复选框点击删除，删除所勾选的数据，并且序号重新排序；2）、点击新增，表格里面内容新增一行新的数据到最下方，并且序号加一；
element表格攻略大全,表头合并,表格合并,动态添加一列
m0_56896206的博客
11-04 1711
elementui表格攻略大全,表头合并,表格合并,动态添加一列 element合并表头与合并表格,需求就是这样,数据结构中需要有一个大类集合,由于数据结构是我定的,图二是这个表格的数据结构 [ { fuelType: '固体燃料(吨)', fuelVarieties: '无烟煤', unitCalorific: '', oxidationRate:'', calorificPower:''
vue jsx使用-简单的form表单合并
wolfsky6的博客
05-14 2543
jsx 使用文档：https://cn.vuejs.org/v2/guide/render-function.html 例子： <script > import * as _ from 'lodash' import { reduce } from '../../util/func.js' export default { props: { showBtn: { ...
element 表格动态合并行和列
12-18
在element-ui的表格组件中，可以实现动态合并行和列的功能。 动态合并行和列是指根据特定条件，将相邻的单元格合并成一个大单元格。在element-ui的表格组件中，可以通过使用scoped slot来实现动态合并行和列。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值