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: '男'
}],
}
}
})
<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);
}