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 = falseif (item.checked) {check = trueshow = false} else {check = falseshow = 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>

vue 原生js展示excal表格类似的页面相关推荐

【vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud】
vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud问答
vue.config.js配置configureWebpack的optimization splitChunks页面空白
确实通过这种方式解决: vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud问答原因可能是这个: Taro项目 ...
原生js实现动态表格分页(封装版)
之前一直用的插件做表格分页,但是不同的场景用到的情况都不同,所以索性用个原生js搞一个封装好的. 后台动态获取数据进行渲染,等页面渲染成功之后在进行分页.数据的获取我用的vue,也可以用ajax等其他 ...
vue原生js打印插件
##需求在vue单页面应用中打印目标区域 ##解决方案使用原生window.print var printhtml = window.getElementById(dom).innerHtml / ...
vue+three.js展示nrrd+vtk3D模型-vue框架集成(下)
nrrd3D模型文件.vtk3D模型文件vue如何使用话不多说,直接上图小白的坎坷路程网上资源视频关于nrrd模型和vtk模型是真的少,公司都没有接触过这方面,职场小白, 累死了要.大家有同感可 ...
原生js实现table表格的各行变色功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
原生js封装table表格操作，获取任意行列td，任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
原生js下载excel表格实现#基于XMLHttpRequest#根据后端blob数据下载excel
不多bb,直接上代码 let postdata = 'areaName='+obj.areaName+'&areaCode='+obj.areaCode+'&schoolName='+ ...
使用原生JS将html表格保存为excel
<div id="table_wrapper"><table bordercolor="black" class="tableA&q ...
原生js导出excel表格，0开头的字符串自动去掉转换成数字
解决方式.优化方式: // 解决excel下载前边的0消失问题 ' ' + value + ' ' 但是此方式导出的excel表格会有警告:该内容前后有空字符串,会影响计算优化解决方式: <t ...

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

vue 原生js展示excal表格类似的页面相关推荐

最新文章

热门文章