html及css部分
<div v-cloak id="taskAllocation">
<div style="height:100%;background-color:white;display: flex;flex-direction: column;">
<div height="50px" style="padding:15px 10px 0">
<el-tabs v-model="activeName" @@tab-click="tabChange">
<el-tab-pane label="按委托分配" name="order">
<span slot="label">按委托分配</span>
</el-tab-pane>
<el-tab-pane label="按样品分配" name="sample">
<span slot="label">按样品分配</span>
</el-tab-pane>
<el-tab-pane label="按项目分配" name="item">
<span slot="label">按项目分配</span>
</el-tab-pane>
<el-tab-pane label="任务总览" name="taskOverview">
<span slot="label">任务总览</span>
</el-tab-pane>
</el-tabs>
</div>
<div style="padding:0 10px; height: calc(100% - 70px)">
<div class="box" ref="box">
<div class="left">
<el-container style="height:100%;border:1px solid #444444;">
左边的表格
</el-container>
</div>
<div class="resize" title="收缩侧边栏">⋮</div>
<div class="mid">
<el-container style="height: 100%; border: 1px solid #444444" id="right_container">
<el-header height="auto" style="padding:0 0 9px 0" id="right_container_top_header">
右边的上面
</el-header>
<el-main class="table-input" style="padding:0;position: relative">
右边表格
</el-main>
<el-footer height="50px" style="padding:10px 0">
右边的分页栏
</el-footer>
</el-container>
</div>
</div>
</div>
</div>
</div>
<style scoped>
#taskAllocation {
height: 100%;
width: 100%;
}
.box {
width: 100%;
height: 100%;
margin: 0 0;
overflow: hidden;
}
.left {
width: calc(35% - 10px);
height: 100%;
background: #FFFFFF;
float: left;
}
.resize {
cursor: col-resize;
float: left;
position: relative;
top: 45%;
background-color: #d6d6d6;
border-radius: 5px;
margin-top: -10px;
width: 10px;
height: 50px;
background-size: cover;
background-position: center;
font-size: 32px;
color: white;
}
.resize:hover {
color: #444444;
}
.mid {
float: left;
width: 65%;
height: 100%;
background: #fff;
}
.label-sign {
width: 3px;
height: 20px;
background: #00a0e9;
margin-bottom: 0;
}
.col-setting {
padding: 0 5px;
border-top: 1px solid #ebeef5;
border-right: 1px solid #ebeef5;
background: #f8f8f9;
height: 30px;
line-height: 42px;
}
.column-select .el-checkbox {
margin-left: 15px !important;
width: 30%;
margin: 10px 1%;
}
.column-select .el-dialog__body {
padding: 10px 10px 20px 10px;
}
.columnSet {
height: 50px;
line-height: 50px;
border-top: 1px solid #e8eaec;
border-left: 1px solid #e8eaec;
border-right: 1px solid #e8eaec;
}
.columnSetLast {
height: 50px;
line-height: 50px;
border: 1px solid #e8eaec;
}
.blue-color {
color: #00a0e9;
}
.gray-color {
color: #999;
}
a {
color: #337ab7;
text-decoration: none;
}
a:focus, a:hover {
color: #23527c;
text-decoration: underline;
}
#right_container_top_header .el-tag {
color: #909399;
padding: 0 20px;
border-color: #DCDFE6;
vertical-align: bottom;
margin-right: -5px
}
#right_container_top_header .el-cascader .el-input__inner {
height: 28px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px
}
</style>
js 部分
new Vue({
el: '#taskAllocation',
filters: {
},
data: function () {
return {
activeName: 'sample',
}
},
created() {
},
mounted() {
this.dragControllerDiv()
},
methods: function () {
return {
tabChange(tab) {
console.log('tab===tab', tab.name);
},
dragControllerDiv: function () {
let resize = document.getElementsByClassName('resize')
let left = document.getElementsByClassName('left')
let mid = document.getElementsByClassName('mid')
let box = document.getElementsByClassName('box')
for (let i = 0; i < resize.length; i++) {
resize[i].onmousedown = function (e) {
resize[i].style.background = '#818181'
let startX = e.clientX
resize[i].left = resize[i].offsetLeft
document.onmousemove = function (e) {
let endX = e.clientX
let moveLen = resize[i].left + (endX - startX)
let maxT = box[i].clientWidth - resize[i].offsetWidth
if (moveLen < 32) moveLen = 32
if (moveLen > maxT - 150) moveLen = maxT - 150
resize[i].style.left = moveLen
for (let j = 0; j < left.length; j++) {
left[j].style.width = moveLen + 'px'
mid[j].style.width = (box[i].clientWidth - moveLen - 20) + 'px'
}
}
document.onmouseup = function (evt) {
resize[i].style.background = '#d6d6d6'
document.onmousemove = null
document.onmouseup = null
resize[i].releaseCapture && resize[i].releaseCapture()
}
resize[i].setCapture && resize[i].setCapture()
return false
}
}
},
}
}(),
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/644203ec6b4dff40b48b5aedff4cda4d.png#pic_center)