tab栏左右分割表格模板

html及css部分

//  thml
<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>

// css

<style scoped>
    #taskAllocation {
        height: 100%;
        width: 100%;
    }
    /* 拖拽相关样式 */
    /*包围div样式*/
    .box {
        width: 100%;
        height: 100%;
        margin: 0 0;
        overflow: hidden;
        /* box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11); */
    }
    /*左侧div样式*/
    .left {
        width: calc(35% - 10px); /*左侧初始化宽度*/
        height: 100%;
        background: #FFFFFF;
        float: left;
    }
    /*拖拽区div样式*/
    .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;
        /*z-index: 99999;*/
        font-size: 32px;
        color: white;
    }
        /*拖拽区鼠标悬停样式*/
        .resize:hover {
            color: #444444;
        }
    /*右侧div'样式*/
    .mid {
        float: left;
        width: 65%; /*右侧初始化宽度*/
        height: 100%;
        background: #fff;
        /* box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11); */
    }

    .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 {
                // tab栏切换
                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) // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
                                let maxT = box[i].clientWidth - resize[i].offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

                                if (moveLen < 32) moveLen = 32 // 左边区域的最小宽度为32px
                                if (moveLen > maxT - 150) moveLen = maxT - 150 //右边区域最小宽度为150px

                                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() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
                            }
                            resize[i].setCapture && resize[i].setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获
                            return false
                        }
                    }
                },
                
            }
        }(),