el-table动态合并单元格

需求背景

批量创建多个计划（plan），计划按组（group）进行分配，计划创建完成之后可以修改，删除
每个组第一列单元格合并显示第几组，组内添加全选/反选组下面的计划
组内计划删除完了之后组删除

demo

在线测试
代码github

代码

<template><div style="padding:0 20px"><el-form:inline="true":model="formInline":rules="rules"class="demo-form-inline"><el-form-item label="广告数" prop="ad"><el-input v-model="formInline.ad" placeholder="广告数"></el-input></el-form-item><el-form-item label="广告组内广告数" prop="each"><el-input v-model="formInline.each" placeholder="广告组数"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">生成数据</el-button></el-form-item></el-form><el-divider></el-divider><el-table:data="tableData":span-method="objectSpanMethod"borderstyle="width: 100%":max-height="650"><el-table-column prop="group" label="组id"> </el-table-column><el-table-column prop="id" label="计划id"> </el-table-column><el-table-column prop="name" label="姓名"> </el-table-column><el-table-column prop="province" label="省市"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column><el-table-column fixed="right" label="操作"><template slot-scope="scope"><el-button@click="handleUpdate(scope.row, 'edit')"size="small"type="primary">编辑</el-button><el-button@click="handleUpdate(scope.row, 'del')"type="danger"size="small">删除</el-button></template></el-table-column></el-table><DialogUpdate:payload="payload":visible.sync="dialogVisible"@submit="handleSubmit"/></div>
</template>

<script>
import DialogUpdate from "./DialogUpdate";
const obj = {name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333
};
export default {components: { DialogUpdate },data() {const validatePass = (rule, value, callback) => {console.log("this.formInline: ", this.formInline);const { ad, each } = this.formInline;if (+ad < +each) {callback(new Error("每组内数小于计划数"));} else {callback();}};return {payload: {},dialogVisible: false,formInline: {ad: 20,each: 2},table: [],rules: {ad: [{ required: true, message: "广告数", trigger: "change" },{pattern: /^(\d+)(\d+)?$/,message: "请输入数字",trigger: "change"},{ validator: validatePass, trigger: "change" }],each: [{ required: true, message: "广告组数", trigger: "change" },{pattern: /^(\d+)(\d+)?$/,message: "请输入数字",trigger: "change"},{ validator: validatePass, trigger: "change" }]}};},computed: {tableData: {get() {let count = 0;return this.table.map((row, index) => {if (index === count) {const len = this.table.filter(item => item.group === row.group).length;count += len;return {...row,rowspan: len,colspan: 1};}return {...row,colspan: 0,rowspan: 0};});}}},mounted() {this.onSubmit();},methods: {handleUpdate(row, action) {if (action === "del") {this.table = this.table.filter(item => {return ![row.id].includes(item.id);});} else {this.payload = { ...row };this.dialogVisible = true;}},handleSubmit(p) {console.log("p: ", p);this.table = this.table.map(item => {return [p].find(i => i.id === item.id) || item;});console.log("this.table: ", this.table);this.dialogVisible = false;},objectSpanMethod({ row, columnIndex }) {if (columnIndex === 0) {return {rowspan: row.rowspan,colspan: row.colspan};}},onSubmit() {let group = 0;this.table = [...Array(+this.formInline.ad).fill(obj)].map((item, index) => {group = Math.floor(index / +this.formInline.each) + 1;return {...item,id: `id_${index}`,group: `group_${group}`};});console.log("submit!");}}
};
</script>

el-table动态合并单元格相关推荐

EasyUI DataGrid根据字段动态合并单元格
为什么80%的码农都做不了架构师?>>> 1.合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * ...
easyexcel 动态合并单元格
easyexcel 动态合并单元格目前操作excel文档的底层都是用poi来进行的,在早期工作开发过程中,是基于poi,然后对每一个数据单元格进行操作代码编写,后面有一些比较好的开源项目,像easy ...
VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...
Ant Design Vue Table 组件合并单元格
Ant Design Vue Table 组件合并单元格项目开发中,有时候需要实现单元格合并的需求,这里记录一下在Ant Design Vue的实现. <template><div ...
动态创建excel文件，动态合并单元格并提供下载
1.动态生成excel的原因 ** 出现的效果: ** 员工姓名没有自动合并单元格,在http://jxls.sourceforge.net/reference/xls_area.html 上面找了半 ...
使用EasyExcel 根据单元格数值动态合并单元格
文章目录前言一.实现思路二.实现步骤 1.拦截策略 2.EasyExcel写操作前言使用EasyExcel 根据单元格数值动态合并单元格开发中遇到一个需求,需要根据Excel表格中单元格的 ...
HTML5 table表格合并单元格和合并边框
原文地址和代码: 原文地址转载请备注代码: <!DOCTYPE html> <html lang="en"> <head><meta ...
Element table各种合并单元格
一.表头合并列这是官网合并列效果,可是,并不适用于只有一级表头的,官方文档并未发现直接实现属性一级表头合并实现方式:给table加 header-cell-style,代码如下 <el-ta ...
动态合并单元格行和列方法封装 ~~~起手可用
在项目中遇到一个需求合并单元格行跟列同时合并,抽个方法做个记录,可以直接引入min.js中直接使用 /*** * @param {*} table vue对象, Element-ui Table 插件 ...
html语言的td合并,table标签合并单元格（包括行和列的合并）的方法
刘代码已经在table标签的使用方法中介绍过该标签的一些具体用法,但这次,我们要讲解的是如何合并table表格中的单元格,包括行的合并以及列的合并方法 table表格单元格的合并,主要分为两种:跨行合 ...

el-table动态合并单元格

需求背景

demo

代码

el-table动态合并单元格相关推荐

最新文章

热门文章