SOURCE

console 命令行工具 X clear

                    
>
console
new Vue({
    el: '#app',
    data() {
        return {
            searchValue: '',
            loading: false,
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                province: '重庆',
                city: '重庆',
                address: '重庆 1518 弄',
                zip: 200333,
                age: 20,
                sex: '男'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333,
                age: 10,
                sex: '男'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333,
                age: 30,
                sex: '男'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '广东省',
                city: '珠海区',
                address: '珠海区金沙江路 1518 弄',
                zip: 200333,
                age: 10,
                sex: '男'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                province: '广东省',
                city: '珠海区',
                address: '珠海区金沙江路 1518 弄',
                zip: 200333,
                age: 28,
                sex: '男'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333,
                age: 3,
                sex: '男'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333,
                age: 88,
                sex: '男'
            }],
        }
    }
})
// var Ctor = Vue.extend(Main)
// new Ctor().$mount('#app')
<script src="https://unpkg.com/element-ui/lib/index.js">

</script>
<div id="app">
	<div>		
		<h4>解决element-ui table 固定列fixed后,底部部分区域滚动条无法拖动问题 </h4>
		<div class="admin_wrapper">
			<el-table class="admin_table" :data="tableData" style="width:800px" height="500">
				<el-table-column prop="date" label="日期" width="150" fixed="left">
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="120">
				</el-table-column>
				<el-table-column prop="age" label="年龄">
				</el-table-column>
				<el-table-column prop="province" label="省份" width="120">
				</el-table-column>
				<el-table-column prop="city" label="市区" width="120">
				</el-table-column>
				<el-table-column prop="zip" label="邮编" width="120">
				</el-table-column>
				<el-table-column prop="zip" label="邮编" width="120">
				</el-table-column>
				<el-table-column prop="zip" label="邮编" width="120">
				</el-table-column>
				<el-table-column prop="zip" label="邮编" width="120">
				</el-table-column>
				<el-table-column prop="zip" label="邮编" width="120">
				</el-table-column>
				<el-table-column prop="zip" label="邮编" width="120">
				</el-table-column>

				<el-table-column prop="address" label="地址" fixed="right">
				</el-table-column>
			</el-table>
		</div>
	</div>
</div>
.admin_wrapper .el-table__fixed {
    height: auto !important;
    bottom: 16px;
}


/*这个作用是提升层级,使底部可以拖动*/
.admin_wrapper .el-table--scrollable-x,
.admin_wrapper .el-table__body-wrapper {
    z-index: 1 !important;
}


/* 下面是重写固定左列或者右列的阴影样式*/
.admin_wrapper .el-table__fixed-body-wrapper table tr td:last-child {
    box-shadow: inset 4px 0 2px rgba(194, 194, 194, 0.18);
}

.admin_wrapper .el-table__fixed-header-wrapper th:last-child {
    border-left: 2px solid rgba(194, 194, 194, 0.18)
}

.admin_wrapper .el-table__fixed-right {
    box-shadow: inset 2px 2px 5px rgba(194, 194, 194, 0.18);
}


/* 隐藏阴影*/
.admin_wrapper .el-table__fixed {
    box-shadow: none;
}

.admin_wrapper .el-table__fixed::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    content: '';
    z-index: 100;
    width: 1px;
    box-shadow: 0 0 5px rgba(190, 190, 190, 1);
}

本项目引用的自定义外部资源