vue el-table 固定列后 鼠标滚轮 左右滚动
1.效果:2.代码:<template><div class="app-container"><el-table id="historyTable" :data="tableData" style="width: 100%" border><el-table-column fixed prop="date" label="组织机构代码" width="15
·
1.效果:
2.代码:
<template>
<div class="app-container">
<el-table ref="historyTable" id="historyTable" :data="tableData" style="width: 100%" border>
<el-table-column fixed prop="date" label="组织机构代码" width="150">
</el-table-column>
<el-table-column fixed prop="name" label="单位名称" width="120">
</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="address" label="管理机构" width="300">
</el-table-column>
<el-table-column prop="zip" label="统一社会信用代码" width="120">
</el-table-column>
<el-table-column prop="zip" label="流动资产自年初累计(千元)" width="100">
</el-table-column>
<el-table-column prop="zip" label="邮编3" width="120">
</el-table-column>
<el-table-column prop="zip" label="邮编4" width="120">
</el-table-column>
<el-table-column prop="zip" label="邮编5" width="120">
</el-table-column>
<el-table-column prop="zip" label="邮编6" width="120">
</el-table-column>
<el-table-column prop="zip" label="邮编7" width="120">
</el-table-column>
<el-table-column prop="zip" label="邮编8" width="120">
</el-table-column>
<el-table-column prop="zip" label="邮编9" width="120">
</el-table-column>
<el-table-column prop="zip" label="邮编10" width="120">
</el-table-column>
<el-table-column prop="zip" label="邮编11" width="120">
</el-table-column>
<el-table-column prop="zip" label="邮编12" width="120">
</el-table-column>
<el-table-column prop="zip" label="邮编13" width="120">
</el-table-column>
<el-table-column prop="zip" label="邮编14" width="120">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}]
}
},
mounted() {
// 自己随便设置个id, el-table res="historyTable"
this.$refs.historyTable.bodyWrapper.id = 'historyshop'
this.scrollFunction(this.domObj, 'historyshop')
},
methods: {
scrollFunction(obj, id) {
obj = document.getElementById(id)
if (obj.attachEvent) {
obj.attachEvent('onmousewheel', this.mouseScroll(obj))
} else if (obj.addEventListener) {
obj.addEventListener('DOMMouseScroll', this.mouseScroll(obj), false)
}
obj.onmousewheel = obj.onmousewheel = this.mouseScroll(obj)
},
mouseScroll(obj, callback) {
return function() {
let e = window.event || document.all ? window.event : arguments[0] ? arguments[0] : event
let detail, moveForwardStep, moveBackStep
let step = 0
if (e.wheelDelta) { // google 下滑负数: -120
detail = e.wheelDelta
moveForwardStep = -1
moveBackStep = 1
} else if (e.detail) { // firefox 下滑正数:3
detail = event.detail
moveForwardStep = 1
moveBackStep = -1
}
// 鼠标滚轮距离
step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
e.preventDefault()
obj.scrollLeft = obj.scrollLeft + step
}
},
}
}
</script>
<style>
</style>
更多推荐
已为社区贡献6条内容
所有评论(0)