vue+element-ui 表格列合通用方法

最新推荐文章于 2024-04-22 16:00:31 发布

蔡燃

最新推荐文章于 2024-04-22 16:00:31 发布

阅读量735

点赞数

分类专栏：蔡燃代码片段文章标签：前端 vue elementui Powered by 金山文档

本文链接：https://blog.csdn.net/qq_35758320/article/details/129038610

版权

蔡燃代码片段专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue+element-ui 表格列合并通用方法

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>表格合并</title>
    <script src="data3.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<div id="app">
    <div>


        <el-table :data="dataList" border
                  style="width: 100%" :span-method="objectSpanMethod">

            <el-table-column prop="province" header-align="center" align="center" label="所属省份"
                             width="150"></el-table-column>
            <el-table-column prop="laboratoryName" header-align="center" align="center" width="300"
                             label="办事处/实验中心">
            </el-table-column>
            <el-table-column prop="contactPhone" header-align="center" align="center" label="联系电话"
                             width="150"></el-table-column>
            <el-table-column prop="address" header-align="center" align="center" label="地址"></el-table-column>
            <el-table-column prop="status" header-align="center" align="center" width="180" label="状态">
                <template slot-scope="scope">
                    <span>{{ scope.row.status == 1 ? "启用" : "禁用" }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="sort" header-align="center" align="center" label="排序"
                             width="120"></el-table-column>

        </el-table>


    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                dataList: [],
                mergeColumns: ["province", "laboratoryName", "status"],// 表格中合并的列名
            };
        },
        created() {
            this.getDataList();

        },
        methods: {
            objectSpanMethod({row, column}) {
                if (this.mergeColumns.indexOf(column.property) > -1) {
                    console.log(this.mergeColumns.indexOf(column.property));
                    return {
                        rowspan: row["mySort_" + column.property],
                        colspan: 1
                    };
                }
            },

            /**
             * 数据排序合计
             * @param data 数组数据 [{},{}...] 格式 数组
             * @param order 要排序的字段 [name,qq]  格式 数组  备注：优先级按数组顺序
             * @param index 按第几个字段开始排序
             * @returns {[]} 返回排序后的数组
             * 备注 在排好序的第一位有 排序字段的合计数
             */
            mySort(data, order, index = 0) {
                let map = {};
                let keys = [];
                let key = order[index];
                for (let item of data) {
                    if (map[item[key]]) {
                        map[item[key]].push(item);
                    } else {
                        keys.push(item[key]);
                        map[item[key]] = [];
                        map[item[key]].push(item);
                    }
                }
                keys.sort();
                let newData = [];
                for (let k of keys) {
                    let list = map[k];
                    if (index < order.length - 1) {
                        list = this.mySort(list, order, index + 1);
                    }
                    for (let i = 0; i < list.length; i++) {
                        if (i === 0) {
                            list[i]["mySort_" + key] = list.length;
                        }
                        newData.push(list[i]);
                    }
                }
                return newData
            },


            // 获取数据列表
            getDataList(index) {
                this.dataList = this.mySort(data, this.mergeColumns);
            },

        }
    });
</script>
</body>
</html>

//模拟数据
let data = [{
    "id": 12,
    "province": "北京市",
    "laboratoryName": "北京办事处",
    "contactPhone": "123",
    "address": "北京市海淀区远大路一号金源时代商务中心b区写字楼702",
    "sort": 0,
    "status": 1,
    "createTime": "2023-02-13 11:30:03",
    "updateTime": "2023-02-13 11:30:57"
}, {
    "id": 13,
    "province": "北京市",
    "laboratoryName": "北京办事处",
    "contactPhone": "1234",
    "address": "北京市丰台区南三环西路16号搜宝商务中心3号楼901室",
    "sort": 0,
    "status": 1,
    "createTime": "2023-02-13 11:30:42",
    "updateTime": "2023-02-13 11:31:04"
}, {
    "id": 10,
    "province": "天津市",
    "laboratoryName": "24124124",
    "contactPhone": "15426547846",
    "address": "12412",
    "sort": 1,
    "status": 1,
    "createTime": "2023-02-13 11:26:31",
    "updateTime": "2023-02-13 11:26:31"
}, {
    "id": 14,
    "province": "天津市",
    "laboratoryName": "天津办事处",
    "contactPhone": null,
    "address": "天津市南开区鞍山西道259号信诚大厦1-1611",
    "sort": 1,
    "status": 2,
    "createTime": "2023-02-13 11:33:49",
    "updateTime": "2023-02-13 11:33:59"
}, {
    "id": 11,
    "province": "河北省",
    "laboratoryName": "河北省郑州办事处",
    "contactPhone": null,
    "address": "河南省郑州市高新区长椿路11号高新技术产业开发区国家大学科技园西区2号楼孵化楼B座10楼南户",
    "sort": null,
    "status": 1,
    "createTime": "2023-02-13 11:28:33",
    "updateTime": "2023-02-13 11:28:33"
}, {
    "id": 15,
    "province": "河北省",
    "laboratoryName": "河北省郑州办事处",
    "contactPhone": "13731110220",
    "address": "河北省石家庄长安区体育北大街谈南路63号睿和中心2001",
    "sort": 1,
    "status": 1,
    "createTime": "2023-02-13 11:34:32",
    "updateTime": "2023-02-13 11:34:32"
}, {
    "id": 6,
    "province": "河北省",
    "laboratoryName": "河北省办事处1",
    "contactPhone": "13645744754",
    "address": "河北省廊坊",
    "sort": 4,
    "status": 2,
    "createTime": "2023-02-13 10:15:07",
    "updateTime": "2023-02-13 10:15:07"
}, {
    "id": 9,
    "province": "湖北省",
    "laboratoryName": "联结实验中心",
    "contactPhone": null,
    "address": "湖北省武汉市东湖高新技术开发区高新二路388号生物医药加速器22栋5楼",
    "sort": null,
    "status": 1,
    "createTime": "2023-02-13 11:26:18",
    "updateTime": "2023-02-13 11:26:18"
}, {
    "id": 1,
    "province": "湖北省",
    "laboratoryName": "测试11",
    "contactPhone": "13642157484",
    "address": "test地址",
    "sort": 1,
    "status": 1,
    "createTime": "2023-02-10 14:14:56",
    "updateTime": "2023-02-10 14:14:58"
}, {
    "id": 2,
    "province": "湖北省",
    "laboratoryName": "测试22",
    "contactPhone": "13854572427",
    "address": "test地址123",
    "sort": 2,
    "status": 1,
    "createTime": "2023-02-10 14:15:29",
    "updateTime": "2023-02-10 14:15:31"
}];

页面显示效果：