tab栏左右分割表格模板_eltable左右表方案

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171

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
                        }
                    }
                },
                
            }
        }(),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70