先上效果图
使用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>