Element多级表格合并处理-阿里云开发者社区

Element多级表格合并处理

2024-04-16 41

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Element多级表格合并处理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>element-ui实现合并单元格效果</title>
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <style>
        .el-table .hovered-row {
            background: #f5f7fa;
        }
        .el-table th{
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100%;">
            <el-table-column prop="id" label="管理岗位" width="180">
            </el-table-column>
            <el-table-column prop="name" label="总数">
            </el-table-column>
            <el-table-column prop="amount1" label="等级">
            </el-table-column>
            <el-table-column :prop="item" :label="item" :key="index" v-for="(item,index) in months">
            </el-table-column>
        </el-table>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            months: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],
            tableData6: [
                {
                    id: '管理岗位',
                    name: '设置总数',
                    amount1: '等级',
                    amount2: '3.2',
                    amount3: 10
                },
                {
                    id: '管理岗位',
                    name: '73',
                    amount1: '设置数',
                    amount2: '4.43',
                    amount3: 12
                },
                {
                    id: '管理岗位',
                    name: '73',
                    amount1: '聘用数',
                    amount2: '1.9',
                    amount3: 9
                }
            ],
            column_row_offset: {
                id: [3, 1, 1],
                name: [1, 2, 1, 1],
                amount1: [1, 1, 1, 1, 1],
                amount2: [1, 1, 1, 1, 1],
                amount3: [1, 1, 1, 1, 1]
            },
            now_col_row_num: {},
            now_col_offset: {},
        },
        mounted() {
            this.tableData6 = this.tableData6.map(v => {
                this.months.forEach((item, index) => {
                    if (v.amount1 === '等级') {
                        v[item] = item
                    } else if (v.amount1 === '设置数') {
                        v[item] = index
                    } else if (v.amount1 === '聘用数') {
                        v[item] = index
                    }else{
                        v[item] = '--'
                    }
                    this.column_row_offset[item] = [1, 1, 1, 1, 1]
                });
                return v
            })
            console.log(this.tableData6)
        },
        methods: {
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (!this.now_col_row_num[column.property]) {
                    this.now_col_row_num[column.property] = Object.assign([], this.column_row_offset[column.property]);
                    let a = this.now_col_row_num[column.property].shift();
                    this.now_col_offset[column.property] = a;
                    return {
                        rowspan: a,
                        colspan: 1
                    };
                } else if (rowIndex >= this.now_col_offset[column.property]) {
                    let a = this.now_col_row_num[column.property].shift();
                    this.now_col_offset[column.property] += a;
                    return {
                        rowspan: a,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }

            }
        }
    })
</script>

</html>

Element多级表格合并处理

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Element多级表格合并处理

热门文章

最新文章

相关电子书

相关实验场景