element表格行列的动态合并示例详解

目录
  • 效果图
  • 代码详解
  • 数据结构
    • 行合并
    • 列合并
  • 完整代码+注释

效果图

合并行

合并列

element的table提供了合并行或者列的方法,并且有一个示例,传送入口:element.eleme.cn/#/zh-CN/com…

但是实际应用中,后台数据的返回格式和指定合并肯定是动态且没有规律的。element的示例过于简单,并且也没有什么太多的解释。实操中就碰到了这个问题。现在记录下来。

代码详解

实操中,需要合并的代码通常就是子数据需要进行合并,因为后台返回的格式都是父数据中包裹着子数据,这种格式看起来也是比较清晰。方便用在其他地方或者随时更改需求(比如不需要表格),因此数据格式转换就由前端进行负责了。

数据结构

后台返回的大概就是这种结构

originData: [
    {
        sort: '01',
        children: [
            {
                name: '01-1号'
            },
            {
                name: '01-2号'
            }
        ]
    },
    {
        sort: '02',
        children: [
            {
                name: '02-1号'
            },
        ]
    }
]

行合并

因为element的table展示行的时候是遍历数组的,data中有几条数据就会展示出几行,然而我们进行行合并的时候,肯定是展示子数据的行数。因此,我们需要对原数据进行操作,将包裹在children中的数据展开,总行数就是每个children的长度之和。

在展开数据的同时,我们就可以进行行合并的合并行数赋值操作了!

通过map展开数据,在展开循环每一个children时,给children里的第一个元素增加了一个代表着合并长度的字段,值为该children的长度,代表着我这一个数据该合并几行

if(subIndex == 0){
    content['rowNum'] = res.children.length
}

行合并的时候,就可以直接通过判断rowNum的数值进行合并了,有rowNum的数值的表示需要变成rowNum行,没有的则表示需要隐藏,赋值为0。这一部分记住,虽然合并了行,但是本身还是要占用一列的。如果忘记赋值合并多少列,就会被隐藏掉

if(columnIndex == 0){
    return {
        rowspan: row.rowNum, // 合并行数
        colspan: row.rowNum>0?1:0  // 合并列数
    };
}

列合并

列合并的时候不需要去操作数据格式了(针对我上面写的那种格式,具体看后台返回的数据结构),但是需要去知道我的表格里该有多少列,即取最多子元素的children长度,赋值为columnLength

获得了需要多少列后,就需要进行合并列操作了,我们要获得几个值:

  • 总列数:需要在求出的columnLength的基础上增加父数据的列数,我这里父数据只有sort,因此总列数需要+1,就是columnLength+1
  • 当前列数:合并的方法会返回当前行的详细数据,同理还得+1,所以当前列数是row.children.length+1
  • 待合并列数的列:表示我第几列开始需要合并了,即我当前数据最后一个有参数的值,赋值columnSort。在进行判断之后,等同于当前列数为row.children.length + 1
  • 待合并列:表示我需要合并成几列,为总列数-待合并列数的列,同时不要忘记自身占一列,需要+1,赋值columnNum,为columnLength + 1 - columnSort + 1

上面的几个参数获取只要理清楚了各个数据之间的关系之后,其实并不难,就是普通的加减,但要是理不清楚,着实会晕一段时间。

console.log(`总列数${this.columnLength+1},当前列数${row.children.length+1}`);
if(row.children.length < this.columnLength){
    let columnSort = row.children.length + 1
    let columnNum = this.columnLength + 1 - columnSort + 1
    if(columnIndex+1 == columnSort){
        return{
            rowspan: 1,
            colspan: columnNum
        }
    }else if(columnIndex+1 > columnSort ){
        return [0, 0];
    }
    console.log(`第${rowIndex+1}行,第${columnSort}列待合并${columnNum}列`);
}

完整代码+注释

<template>
    <div class="order-table-contain">
        <el-tabs v-model="activeName">
            <el-tab-pane label="行合并" name="row">
                <el-table
                    :data="tableRowData"
                    border
                    :height="'530px'"
                    style="width: 100%;"
                    :span-method="mergeRowMethod">
                    <el-table-column
                        align="center"
                        prop="sort"
                        label="编号">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="name"
                        label="名称内容">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="列合并" name="column">
                <el-table
                    :data="tableColumnData"
                    border
                    :height="'530px'"
                    style="width: 100%;"
                    :span-method="mergeColumnMethod">
                    <el-table-column
                        align="center"
                        prop="sort"
                        label="编号">
                    </el-table-column>
                    <el-table-column
                        label="名称内容"
                        align="center">
                        <el-table-column
                            v-for="(item, index) in columnLength"
                            :key="index"
                            align="center"
                            prop="name"
                            label="名称内容">
                            <template slot-scope="scope">
                                <span v-if="scope.row.children[index]">
                                    {{scope.row.children[index].name}}
                                </span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
export default {
    data() {
        return {
            originData: [
                {
                    sort: '01',
                    children: [
                        {
                            name: '01-1号'
                        },
                        {
                            name: '01-2号'
                        },
                        {
                            name: '01-3号'
                        },
                    ]
                },
                {
                    sort: '02',
                    children: [
                        {
                            name: '02-1号'
                        },
                    ]
                },
                {
                    sort: '03',
                    children: [
                        {
                            name: '03-1号'
                        },
                        {
                            name: '03-2号'
                        },
                        {
                            name: '03-3号'
                        },
                        {
                            name: '03-4号'
                        },
                    ]
                },
                {
                    sort: '04',
                    children: [
                        {
                            name: '04-1号'
                        },
                        {
                            name: '04-2号'
                        },
                    ]
                },
                {
                    sort: '05',
                    children: [
                        {
                            name: '05-1号'
                        },
                    ]
                }
            ],
            tableColumnData: [],
            tableRowData: [],
            activeName: 'row',
            columnLength: 0
        };
    },
    watch:{
        activeName: {
            handler(val){
                if(val == 'row'){
                    this.loadRowData()
                }else{
                    this.loadColumnData()
                }
            },
            immediate: true
        }
    },
    methods: {
        loadRowData(){
            this.tableRowData = []
            let originArr = JSON.parse(JSON.stringify(this.originData))
            // 普通的数据转换,将后台格式转换成element表格需要的格式
            if(Array.isArray(originArr)){
                originArr.map(res=>{
                    if(Array.isArray(res.children)){
                        res.children.map((subRes, subIndex)=>{
                            let content = {}
                            content = subRes
                            content['sort'] = res.sort
                            // 重点!赋值合并的行数数值,只需要取子循环的第一个数赋值待合并的行数即可
                            if(subIndex == 0){
                                content['rowNum'] = res.children.length
                            }
                            this.tableRowData.push(content)
                        })
                    }
                })
            }
        },
        loadColumnData(){
            this.tableColumnData = JSON.parse(JSON.stringify(this.originData))
            if(Array.isArray(this.tableColumnData)){
                this.tableColumnData.map((res, index)=>{
                    if(Array.isArray(res.children)){
                        // 获取最大列数为element的列数
                        if(index == 0){
                            this.columnLength = res.children.length
                        } else{
                            if(res.children.length > this.columnLength){
                                this.columnLength = res.children.length
                            }
                        }
                    }
                })
            }
        },
        // 合并行
        mergeRowMethod({ row, column, rowIndex, columnIndex }){
            // columnIndex 代表列数,从0开始计数,我们要合并的字段属于第一列,取0
            if(columnIndex == 0){
                return {
                    rowspan: row.rowNum, // 待合并行数 -- 合并的行数长度就等于之前赋值的子数据的长度;未赋值的即表示0,不显示
                    colspan: row.rowNum>0?1:0  // 待合并列数 -- 合并的列数自身占一列,被合并的要返回0,表示不显示
                };
            }
        },
        // 合并列
        mergeColumnMethod({ row, column, rowIndex, columnIndex }){
            console.log(`总列数${this.columnLength+1},当前列数${row.children.length+1}`); // 列数记得加上父的列数
            // 当数据列数小于表格列数,需合并
            if(row.children.length < this.columnLength){
                let columnSort = row.children.length + 1 // 待合并列序号,表示第几列待合并 -- 数据返回的有数据的最后一列,加上第一列
                let columnNum = this.columnLength + 1 - columnSort + 1 // 待合并的列数需要合并几列 -- 从0开始计数,并且要加上自身的列数,需+2
                if(columnIndex+1 == columnSort){
                    return{
                        rowspan: 1,
                        colspan: columnNum
                    }
                }else if(columnIndex+1 > columnSort ){
                    return [0, 0]; // 合并的两种写法,被合并的需要赋值0隐藏
                }
                console.log(`第${rowIndex+1}行,第${columnSort}列待合并${columnNum}列`);
            }
        }
    }
};
</script>
<style lang="less">
.order-table-contain{
    padding: 20px;
    padding-top: 5px;
    box-sizing: border-box;
    // 设置表头样式
    .el-table__header-wrapper{
        .el-table__header{
            .is-group{
                tr:nth-child(2){
                    display: none;
                }
            }
        }
    }
}
</style>

以上就是element表格行列的动态合并示例详解的详细内容,更多关于element表格行列动态合并的资料请关注我们其它相关文章!

(0)

相关推荐

  • element 动态合并表格的步骤

    前言 element 官方的例子太简单了,不满足实际的需求 数据肯定是动态的,合并的行数,列数都是动态的,该如何知道每一行的合并数呢 需求 动态合并表格,数据来源于数据库 正文 一开始,我的数据源是单独的数组,表格数据合并了几个数据, 我根据各个数组的长度,来决定每一行的合并数 结果:有些数据是正常的,但有些又合并出错了.计算的方式不对 尝试二 dataPretreatment() 用这个方法 计算出每一行的行数 dataPretreatment(){ //表格数据列合并预处理,生成一个与行数相

  • element表格行列拖拽的实现示例

    element ui 表格没有自带的拖拽排序的功能,只能借助第三方插件Sortablejs来实现,先来看一下动态图,效果是不是你们想要的. 首先需要安装Sortable.js npm install sortablejs --save 然后引用 import Sortable from 'sortablejs' 需要注意的是element table务必指定row-key,row-key必须是唯一的,如ID,不然会出现排序不对的情况. ###示例代码 <template> <div st

  • vue element实现表格合并行数据

    本文实例为大家分享了vue element实现表格合并行数据的具体代码,供大家参考,具体内容如下 支持不分页的表格数据,分页的表格数据还有小bug <template> <el-container> <el-main> <el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod" //添加这个实

  • Element Plus修改表格行和单元格样式详解

    目录 前言 设置某一行的样式 设置某一个单元格的样式 表头样式修改(赠品) 总结 前言 实习工作需要根据表格的状态字段来设置行的样式,记录一波. 先来一下基础配置.(Vue3) <template> <el-table :data="tableData" border style="width: 400px"> <el-table-column prop="name" label="姓名" wid

  • vue elementUI表格控制显示隐藏对应列的方法

    本文实例为大家分享了vue elementUI表格控制显示隐藏对应列的具体代码,供大家参考,具体内容如下 需求:后端返回全部列数据.前端根据选项来显示对应的列,如果不勾选,默认全部隐藏. 效果图 勾选后显示对应的列 上代码 html部分 这里用v-if来显示隐藏,因为这个elementul组件的原因,v-show不生效,要用v-if <el-table-column         v-if="lists[0].ispass"           label="Uppe

  • vue+element创建动态的form表单.以及动态生成表格的行和列

    动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v-if来渲染对应的表单,数据,事件什么的都可以动态的传进去,比较好用 复制代码  1 <el-form size="mini" class="lj-form lj-form-s1">  2             <div v-for="(i

  • element表格行列的动态合并示例详解

    目录 效果图 代码详解 数据结构 行合并 列合并 完整代码+注释 效果图 合并行 合并列 element的table提供了合并行或者列的方法,并且有一个示例,传送入口:element.eleme.cn/#/zh-CN/com… 但是实际应用中,后台数据的返回格式和指定合并肯定是动态且没有规律的.element的示例过于简单,并且也没有什么太多的解释.实操中就碰到了这个问题.现在记录下来. 代码详解 实操中,需要合并的代码通常就是子数据需要进行合并,因为后台返回的格式都是父数据中包裹着子数据,这种

  • js对table的td进行相同内容合并示例详解

    复制代码 代码如下: function hb(){ var tab = document.getElementById("subtable"); var maxCol = 3, val, count, start; var ys=""; for(var col = maxCol-1; col >= 0 ; col--) { count = 1; val = ""; for(var i=0; i<tab.rows.length; i++

  • Element Table行的动态合并及数据编辑示例

    目录 正文 思路 1:第二列和第三列第四列根据名称进行合并 2:可以动态编辑第三列和第四列解决 3:第一列的数据是根据第三列相加得来的 4:弹出个输入框 完整代码 正文 先描述一下需求,看下图 1:动态合并行,如图所示,第一列全部合并,第二列和第三列第四列根据名称进行合并 2:可以动态编辑第三列和第四列,并且只能编辑属于此合并行的第三列和第四列,比如第一个编辑按钮点击后,只有前三行可以编辑 3:第一列的数据是根据第三列相加得来的 4:点击快捷填写,可以快速填写第三列和第四列 思路 1:第二列和第

  • 利用IntersectionObserver实现动态渲染的示例详解

    目录 前言 实现 懒加载组件 长列表组件示意 测试 前言 开发表格时,希望支持可视后的动态加载.在查找资料做了一些尝试后,最终使用IntersectionObserver,相对方便地实现了该功能 IntersectionObserver诞生已经有几年了,所以它的兼容性目前已经达到可以使用的程度了.具体兼容程度以及详细API可参考CDN 实现 懒加载组件 核心就是利用了IntersectionObserver的能力,封装了LazyContainer组件,该组件的children,只有在视口中可见时

  • Java实现导出word表格的示例详解

    目录 目标 实现 依赖 模版 代码 目标 多级表头.分页.动态数据 实现 依赖 <!-- poi工具类--> <dependency> <groupId>com.deepoove</groupId> <artifactId>poi-tl</artifactId> <version>1.12.0</version> </dependency> 模版 代码 TableData数据(模版对应的数据对象)

  • 对Vue table 动态表格td可编辑的方法详解

    项目中需求用到可编辑表格 下图这种 ↓ element UI 组件table表格中 增加template 模版 翻入input 根据业务逻辑增加全局变量 isEdit 是否变化. <el-table-column label="名称" width="140"> <template scope="scope"> <el-input v-if="scope.row.isEdit && scope

  • Python-Flask:动态创建表的示例详解

    今天小编从项目的实际出发,由于项目某一个表的数据达到好几十万条,此时数据的增删查改会很慢:为了增加提高访问的速度,我们引入动态创建表. 代码如下: from app_factory import app from sqlalchemy import Column, String, Integer class ProjectModel(app.db.model, app.db.Mixin): tablename = 'Project_' ID = Column(String(50), name='

  • Element中table组件按照属性执行合并操作详解

    在实际开发中,要求使用elementUI的table组件对表格数据上下行相邻相同的数据进行合并,在elem官网上查看到是有对应的组件和合并方法 <el-table :data="tableData" :span-method="objectSpanMethod"> <el-table-column prop="id" label="ID" width="180"> </el-t

  • Vue Element Sortablejs实现表格列的拖拽案例详解

    1. css:    dragTable.css @charset "UTF-8"; .w-table{ height: 100%; width: 100%; float: left; } /* 拖动过程中,鼠标显示样式 */ .w-table_moving .el-table th .thead-cell{ cursor: move !important; } .w-table_moving .el-table__fixed{ cursor: not-allowed; } .w-ta

随机推荐