vue 原生js展示excal表格类似的页面

先上效果图

使用vue时候展示类似excal页面表格，代码如下：

<template>
    <div class="main box-sizing block-shadow addSystem">
        <div class="persList">
            <table>
                <thead>
                <tr>
                    <td v-for="(item,index) in tableDataHeader">
                        {{item.name}}
                    </td>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(items,index) in tableData" v-if="tableData.length">
                    <td v-for="(itemIng,keyIng) in tableData[index]"
                        :rowspan="rowspanFn(index,keyIng)"
                        :colspan="colspanFn(index,keyIng)"
                        v-if="itemIng.length&&itemIng[0].colspan&&itemIng[0].rowspan">
                        <template v-for="(item,key) in itemIng">
                            <label>
                                <input type="checkbox"
                                       :value="item.value"
                                       :key="key"
                                       :class="item.type"
                                       v-model="item.checked"
                                /><span>{{item.value}}</span>
                            </label>
                            <el-button @click="addTd(index,keyIng,key)" type="primary" size="mini"
                                       v-if="keyIng==0">
                                新增
                            </el-button>
                            <el-button @click="delateTd(index,keyIng,key)" type="danger" size="mini"
                                       v-if="keyIng==0">
                                删除
                            </el-button>
                        </template>
                    </td>
                </tr>
                </tbody>
            </table>
            <el-row class="listWrapSubm">
                <el-button type="primary" @click="tableDataSave('addData')">提交</el-button>
                <el-button @click="">取消</el-button>
            </el-row>
        
        </div>
    </div>
</template>

<script>
    
    export default {
        data() {
            return {
                tableDataHeader: [
                    {
                        name: '一级菜单',
                    }, {
                        name: '二级菜单',
                    }, {
                        name: '三级菜单',
                    }, {
                        name: '四级菜单',
                    },
                ],
                tableData: [
                    [
                        [
                            {'id': 'rmanagement', 'value': '招聘管理', 'checked': false, rowspan: 8,colspan:1},
                        ],
                        [
                            {'id': 'achannels', 'value': '招聘渠道', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                        ],
                        [
                            {'id': 'aadd', 'value': '新增渠道', 'checked': false, 'show': false, rowspan: 8,colspan:1},
                            {'id': 'aeidt', 'value': '编辑', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'adel', 'value': '删除', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                        ],
                        [
                            {'id': 'aadd', 'value': '新增渠道', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'aeidt', 'value': '编辑', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'adel', 'value': '删除', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                        ],
                    ],
                    [
                        [
                            {'id': '', 'value': '', 'checked': false, rowspan: 0,colspan:0},
                        ],
                        [
                            {'id': 'rtask', 'value': '招聘任务-人事部', 'checked': false, 'type': 'radioIng', 'show': false,rowspan: 1,colspan:1}
                        ],
                        [
                            {'id': '', 'value': '', 'checked': false, rowspan: 0,colspan:0},
                            
                        ],
                        [
                            {'id': 'btask_details', 'value': '查看任务详情', 'checked': false, 'show': false,rowspan: 2,colspan:1},
                            {'id': 'badd', 'value': '新建任务', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'bexport', 'value': '导出', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'brecords', 'value': '查看修改记录', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'bcharge', 'value': '指定负责人', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'bdetails', 'value': '查看招聘详情', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'bagree', 'value': '同意', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'bend', 'value': '完结', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'breject', 'value': '驳回', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                        ],
                    ],
                    [
                        [
                            {'id': '', 'value': '', 'checked': false, rowspan: 0,colspan:0},
                        ],
                        [
                            {'id': 'rtask', 'value': '招聘任务-其他部门', 'checked': false, 'type': 'radioIng', 'show': false,rowspan: 1,colspan:1}
                        ],
                        [
                            {'id': '', 'value': '', 'checked': false, rowspan: 0,colspan:0},
                        ],
                        [
                            {'id': '', 'value': '', 'checked': false, rowspan: 0,colspan:0},
                        ],
                    ],
                    [
                        [
                            {'id': '', 'value': '', 'checked': false, rowspan: 0,colspan:0},
                        ],
                        [
                            {'id': 'reprocessed', 'value': '待处理简历', 'checked': false, 'type': 'radioIng', 'show': false,rowspan: 1,colspan:1}
                        ],
                        [
                            {'id': '', 'value': '', 'checked': false, rowspan: 0,colspan:0},
                        ],
                        [
                            {'id': 'cdetails', 'value': '查看详情', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'cresume', 'value': '新增，导入简历', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'cdelete', 'value': '删除', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'cinterviews', 'value': '安排面试', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'coffer', 'value': '发offer', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'ctalentpool', 'value': '移入人才库', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'cblacklist', 'value': '移入黑名单', 'checked': false, 'show': false,rowspan: 1,colspan:1}
                        ],
                    ],
                    [
                        [
                            {'id': '', 'value': '', 'checked': false, rowspan: 0,colspan:0},
                        ],
                        [
                            {'id': 'rlibrary', 'value': '简历库', 'checked': false, 'show': false,rowspan: 1,colspan:1}
                        ],
                        [
                            {'id': '', 'value': '', 'checked': false, rowspan: 0,colspan:0},
                        ],
                        [
                            {'id': 'ddetails', 'value': '查看详情', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'dresume', 'value': '新增，导入简历', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'dexport', 'value': '导出', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'dinterviews', 'value': '安排面试', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'doffer', 'value': '发offer', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'dtalentpool', 'value': '移入人才库', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'dblacklist', 'value': '移入黑名单', 'checked': false, 'show': true,rowspan: 1,colspan:1}
                        ],
                    ],
                    [
                        [
                            {'id': '', 'value': '', 'checked': false, rowspan: 0,colspan:0},
                        ],
                        [
                            {'id': 'larrangement', 'value': '面试安排', 'checked': false, 'show': false,rowspan: 1,colspan:1}
                        ],
                        [
                            {'id': '', 'value': '', 'checked': false, rowspan: 0,colspan:0},
                        ], [
                            {'id': 'edetails', 'value': '查看简历详情', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'eexport', 'value': '导出', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'echanel_interviews', 'value': '取消面试', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'einterviews', 'value': '安排面试', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'einterviews_details', 'value': '查看面试详情', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'eoffer', 'value': '发offer', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'etalentpool', 'value': '移入人才库', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'eblacklist', 'value': '移入黑名单', 'checked': false, 'show': false,rowspan: 1,colspan:1}
                        ],
                    ],
                    [
                        [
                            {'id': '', 'value': '', 'checked': false, rowspan: 0,colspan:0},
                        ],
                        [
                            {'id': 'osent', 'value': '已发offer', 'checked': false, 'show': false,rowspan: 1,colspan:1}
                        ],
                        [
                            {'id': '', 'value': '', 'checked': false, rowspan: 0,colspan:0},
                        ],
                        [
                            {'id': 'fdetails', 'value': '查看详情', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'fexport', 'value': '导出', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'fcontract', 'value': '签合同', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'fdeply_check', 'value': '延迟报到', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'fchanel_registration', 'value': '取消报到', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'fpost', 'value': '办理入职', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'ftalentpool', 'value': '移入人才库', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'fblacklist', 'value': '移入黑名单', 'checked': false, 'show': false,rowspan: 1,colspan:1}
                        ],
                    ],
                    [
                        [
                            {'id': '', 'value': '', 'checked': false, rowspan: 0,colspan:0},
                        ],
                        [
                            {'id': 'earrangement', 'value': '入职安排', 'checked': false, 'show': false,rowspan: 1,colspan:1}
                        ],
                        [
                            {'id': '', 'value': '', 'checked': false, rowspan: 0,colspan:0},
                        ],
                        [
                            {'id': 'gdetails', 'value': '查看详情', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'gexport', 'value': '导出', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'gedit', 'value': '编辑', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'gentry_details', 'value': '入职详情', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'gemployee', 'value': '入员工名册', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'gtalentpool', 'value': '移入人才库', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'gblacklist', 'value': '移入黑名单', 'checked': false, 'show': false,rowspan: 1,colspan:1}
                        ],
                    ],
                    [
                        [
                            {'id': 'emanagement', 'value': '员工管理', 'checked': false, 'show': false, rowspan: 1,colspan:2}
                        ],
                        [
                            {'id': 'sroster', 'value': '员工名册', 'checked': false, 'show': false,rowspan: 1,colspan:0}
                        ],
                        [
                            {'id': 'hdetails', 'value': '查看详情', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'hemployees', 'value': '新增', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'hexport', 'value': '导出', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'hedit', 'value': '编辑', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                        
                        ],
                        [
                            {'id': 'hdetails', 'value': '查看详情', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'hemployees', 'value': '新增', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'hexport', 'value': '导出', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'hedit', 'value': '编辑', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'hreminder', 'value': '提醒设置', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'hresignation', 'value': '办理离职', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'hdeparture', 'value': '离职详情', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'hrositive', 'value': '转正', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                            {'id': 'hrenew', 'value': '续签', 'checked': false, 'show': false,rowspan: 1,colspan:1},
                        ],
                    ]
                
                ],
                status: true,
            }
        },
        created() {
        },
        computed: {},
        methods: {
            delateTd(index, keyIng, key) {
                let howmany = this.tableData[index][keyIng][key].rowspan ? this.tableData[index][keyIng][key].rowspan : 1;
                this.tableData.splice(index, howmany);
            },
            addTd(index, keyIng, key) {
                this.tableData[index][keyIng][key].rowspan = Number(this.tableData[index][keyIng][key].rowspan) - 1 > 1 ? Number(this.tableData[index][keyIng][key].rowspan) : 1;
                this.tableData.splice(index+this.tableData[index][keyIng][key].rowspan ,0,[
                    [
                        {'id': 'rtask', 'value': '  新增管理', 'checked': false, 'type': 'radioIng', 'show': false, rowspan: 1,colspan:1}
                    ],
                    [
                        {'id': 'rtask', 'value': '新增', 'checked': false, 'type': 'radioIng', 'show': false,rowspan: 1,colspan:1}
                    ],
                    [
                        {'id': 'rtask', 'value': '新增', 'checked': false, 'type': 'radioIng', 'show': false,rowspan: 1,colspan:1}
                    ],
                    [
                        {'id': 'rtask', 'value': '新增', 'checked': false, 'type': 'radioIng', 'show': false,rowspan: 1,colspan:1}
                    ],
                ]);
            },
            rowspanFn(index, indexList) {
                if (this.tableData[index][indexList][0] && this.tableData[index][indexList][0].rowspan) {
                    return this.tableData[index][indexList][0].rowspan
                };
                this.$forceUpdate()
            },
            colspanFn(index, indexList) {
                if (this.tableData[index][indexList][0] && this.tableData[index][indexList][0].colspan) {
                    return this.tableData[index][indexList][0].colspan
                };
                this.$forceUpdate()
            },
            //保存
            tableDataSave: function (addData) {
            },
            oneCheckList(i, show, check) {
            
            },
            oneChangeLevelMenu(item, index, key) {
                let check = true, show = false
                if (item.checked) {
                    check = true
                    show = false
                } else {
                    check = false
                    show = true
                }
            },
            changeLevelMenu(item, index, key) {
                let items = this.tableData[index]
                let itemsPrev = this.tableData[index + 1]
                if (index == 2) {
                    itemsPrev = this.tableData[index - 1]
                }
                
            },
            
        },
        
    }
</script>
<style lang="less">
    .persList {
        width: 100%;
        height: 100%;
        overflow: auto;
        padding-bottom: 100px;
        position: relative;
    
    table {
        width: 100%;
        border-collapse: collapse;
        caption-side: top;
        empty-cells: show;
    }
    
    caption {
        font-family: PingFangSC-Medium;
        font-size: 12px;
        color: #333333;
        text-align: left;
        padding-bottom: 8px;
    }
    
    tr {
        height: 28px;
        font-size: 14px;
        text-align: center;
        line-height: 28px;
    }
    
    .noborder {
        border: 0;
    }
    
    .txtLeft {
        text-align: left;
        padding-left: 18px;
    }
    
    td:hover{
        background: #f1f1f1;
    }
    td {
        font-size: 12px;
        line-height: 26px;
        text-align: center;
        border: 1px solid #c0c4cc;
        padding: 0;
        font-weight: normal;
    }
    
    th {
        font-size: 12px;
        line-height: 26px;
        text-align: center;
        border: 1px solid #E1E3E8;
        padding: 0;
        background: #F6F7F9;
        position: relative;
    }
    
    th.nobg {
        background: white;
    }
    
    tr td input,
    tr td input.el-input__inner {
        height: inherit;
        width: 100%;
        border: 1px solid white;
        display: inline-block;
        margin: 0;
        padding-left: 10px;
        text-align: center;
        
    }
    
    tr td input:focus,
    tr td input.el-input__inner:focus {
        border: 1px solid #409EFF;
    }
    
    tr td .el-date-editor .el-input__icon,
    tr td .el-date-editor .el-icon-date,
    tr td .el-date-editor .el-input__prefix .el-input__icon,
    tr td .el-date-editor .el-input__prefix .el-icon-date {
        color: #409EFF;
    }
    
    td.tleft {
        text-align: left;
        padding-left: 6px;
    }
    
    tr td .recPicker {
        width: 100%;
        height: 100%;
    
    .el-input__icon,
    .el-icon-date {
        color: #409EFF;
    }
    
    }
    
    tr td .dropStyle, tr td .selectStyle {
        width: 100%;
        height: 100%;
        font-size: 12px;
    }
    
    .selectStyle .el-input input {
        font-size: 12px;
    }
    
    tr td .el-dropdown-link {
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    
    tr td .el-dropdown-link i {
        position: absolute;
        right: 10px;
        top: 8px;
    }
    
    tr td .langDrop {
        width: 64px;
    
    .el-dropdown-link {
        text-align: left;
    }
    
    }
    
    tr td .el-checkbox-group {
        height: 28px;
        margin-left: 10px;
    }
    
    tr td .el-radio-group {
        margin-left: 10px;
    }
    
    tr td .el-checkbox {
        font-size: 12px;
        height: 100%;
    }
    
    tr td .el-checkbox__label {
        font-size: 12px;
    }
    
    tr td .el-radio {
        height: 28px;
        padding-top: 6px;
    }
    
    tr td .el-radio__label {
        font-size: 12px;
    }
    
    tr td .el-radio + .el-radio,
    tr td .el-checkbox + .el-checkbox {
        margin-left: 10px;
    }
    
    tr td .el-checkbox__label,
    tr td .el-radio__label {
        padding-left: 6px;
    }
    
    tr td .el-radio__original {
        height: 14px;
    }
    
    tr td .el-date-editor.el-input,
    tr td .el-date-editor.el-input__inner {
        width: 100%;
    }
    
    .addTarget i {
        color: #1298f5;
        font-size: 14px;
    }
    
    .operateStatus .el-icon-close {
        display: none;
    }
    
    .el-form-item .el-select-dropdown__item span,
    .el-form-item .el-input__inner,
    .el-form-item .el-select,
    .el-form-item .el-form-item__label {
        font-size: 12px;
        font-weight: 100;
        
    }
    
    a .el-icon-d-arrow-left {
        margin: 10px 0;
        color: #6B7084;
    }
    
    .listWrapSubm {
        width: 100%;
        margin-top: 30px;
        text-align: center;
    
    .el-button {
        padding: 8px 16px;
    }
    
    }
    table {
        margin-top: 20px;
    }
    
    table tbody tr td .el-button--mini {
        padding: 0px 9px !important;
    }
    
    table tbody tr td label {
        margin-right: 10px;
        color: #606266;
    
    input {
        vertical-align: inherit;
        width: auto;
        margin: 0;
        margin-right: 10px;
        
    }
    
    button span {
        color: white;
        
    }
    
    span {
        display: inline-block;
        color: #999999;
    }
    
    }
    .el-table__row td:nth-child(2) .el-checkbox {
        /*display: block ;*/
        /*margin-left: 10px;*/
        /*text-align: left;*/
    }
    
    .el-tabs__header {
        margin-bottom: 10px;
    }
    
    .el-button--small {
        padding: 6px 11px;
        color: white;
        
    }
    
    .el-table td, .el-table th {
        padding: 4px 0;
    }
    
    .el-table--border {
        border: none;
    }
    
    .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
        border-right: none;
    }
    
    .el-table tr td:last-child {
        border-right: 1px solid #ebeef5;
    }
    
    .el-table td, .el-table th.is-center {
        border-bottom: none;
        border-right: none;
    }
    
    .el-table tr:first-child td {
        border-top: none;
    }
    
    .el-table__column-filter-trigger {
        float: right;
        line-height: inherit;
    }
    
    .el-table th.is-leaf {
        border-bottom: 1px solid #ebeef5;
        
    }
   
    .el-input__icon {
        line-height: 28px;
        color: #1298F5;
        
    }
    
    }
</style>