返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue表格首列相同数据合并实现方法
  • 559
分享到

Vue表格首列相同数据合并实现方法

vue合并table表格vue表格相同数据合并vue相同合并 2023-05-16 20:05:40 559人浏览 泡泡鱼
摘要

目录前言表格首列相同数据合并1. 添加文件2. 添加路径3. 查看效果前言 本篇来学习下table表格中合并首列相同数据的实现方法 表格首列相同数据合并 1. 添加文件 1.src/

前言

本篇来学习下table表格中合并首列相同数据的实现方法

表格首列相同数据合并

1. 添加文件

1.src/views 下新建mergeCell.Vue文件,代码如下:

<template>
  <div id="app">
    <el-table
            :data="tableData"
            :span-method="(param)=>objectSpanMethod(param)"
            style="width: 100%; margin-top: 20px">
            <el-table-column
                prop="type_test"
                label="类型"               
                align='center'>
            </el-table-column>
            <el-table-column
                prop="type_spec"
                label="模块"
                align='center'
                >
            </el-table-column>
            <el-table-column
                prop="is_execute"
                label="是否执行"
                align='center'
               >
                <template slot-scope="scope">
                    <span v-if="scope.row.is_execute == true">已执行</span>
                    <span v-if="scope.row.is_execute == false">未执行</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="result_status"
                label="结果"
                align='center'
               >
                <template slot-scope='scope'>
                    <el-tag :type="scope.row.result_status | ResultFilter">
                        {{scope.row.result_status}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="created_at"
                label="创建时间"
                align='center'
               >
                <template slot-scope="scope">
                {{ scope.row.created_at}}
            </template>
            </el-table-column>
        </el-table>
  </div>
</template>
<script>

export default {
    filters:{
        ResultFilter(status) {
        const ongSteadyMap = {
            SUCCESS: 'success',
            FaiLURE: 'danger',
            NA: 'primary',
            ABORTED:'info',
            FAIL:'danger',
            None: 'warning'
      }
      return ongSteadyMap[status]
    },
      },
    data() {
        return {
            tableData:[
                {
                    "id": 1,
                    "created_at": "2023-06-18 11:51:07",
                    "updated_at": "2023-04-18 11:51:07",
                    "type_test": "功能测试",
                    "type_spec": "登录",
                    "is_execute": true,
                    "result_status": "SUCCESS"
                },
                {
                    "id": 2,
                    "created_at": "2023-06-18 11:51:07",
                    "updated_at": "2023-06-18 11:51:07",
                    "type_test": "功能测试",
                    "type_spec": "退出",
                    "cr_id": "",
                    "is_execute": true,
                    "result_status": "SUCCESS"
                },
                {
                    "id": 3,
                    "created_at": "2023-06-18 11:51:07",
                    "updated_at": "2023-06-18 11:51:07",
                    "type_test": "接口测试",
                    "type_spec": "登录",
                    "cr_id": "",
                    "is_execute": false,
                    "result_status": "N/A"
                },
                {
                    "id": 4,
                    "created_at": "2023-06-18 11:51:07",
                    "updated_at": "2023-06-18 11:51:07",
                    "type_test": "接口测试",
                    "type_spec": "退出",
                    "cr_id": "",
                    "is_execute": true,
                    "result_status": "FAIL"
                }
            ]
        };
    },
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            console.log('objectSpanMethod',row, column, rowIndex, columnIndex)
            if (columnIndex === 0) {
                    const _row = this.flitterData(this.tableData).one[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col,
                    };
		    }
        },
        flitterData(arr) {
            // 合并表格第一列
            let spanOneArr = [];
            let concatOne = 0;
            arr.forEach((item, index) => {

                if (index === 0) {
                    spanOneArr.push(1);
                    }
                else {
                    console.log('item',item,index)
                    console.log('arr',arr[index-1])
                    // 这里的type_test是表格绑定的字段,也就是需要合并的字段,根据自己的需求来改
                    if (item.type_test == arr[index -1].type_test) {
                        // 第一列需合并相同内容的判断条件
                        spanOneArr[concatOne] += 1;
                        spanOneArr.push(0);
                    } else {
                        spanOneArr.push(1);
                        concatOne = index;
                    }

                }
            });
            return {
                one: spanOneArr,
            };
        },
        
    }
};
</script>

2. 添加路径

在router下添加,如下路径

{
    path: '/mergeCell',
    component: Layout,
    children: [
      {
        path: 'mergeCell',
        name: 'mergeCell',
        component: () => import('@/views/mergeCell.vue'),
        meta: { title: 'mergeCell', icon: 'fORM' }
      }
    ]
  },

3. 查看效果

npm run dev 运行,效果如下图

在这里插入图片描述

到此这篇关于Vue实现表格首列相同数据合并的文章就介绍到这了,更多相关vue合并table表格内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Vue表格首列相同数据合并实现方法

本文链接: https://www.lsjlt.com/news/210530.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作