vue3 element-table实现左右两个表格左右滑动时一起联动
vue3 element-table实现左右两个表格左右滑动时一起联动
·
效果图
先封装一个table.vue
<template>
<el-table :data="tableData" style="width: 100%" :class="tableClassName" :height="300" ref="multipleTableRef">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
</template>
<script lang="ts" setup>
import { onMounted, ref, PropType, watch } from 'vue'
const multipleTableRef = ref<any>()
const scrollTableRef = ref<any>()
const emit = defineEmits(['handleScroll'])
const props = defineProps({
tableData:{
type: Array,
default: []
},
scrollValue:{
type: Number,
default: 0
},
tableClassName:{
type: String,
default: ''
},
})
watch(
()=> props.scrollValue,
newVal =>{
if(multipleTableRef.value){
multipleTableRef.value.setScrollLeft(newVal)
}
},
{ immediate: true}
)
const syncScroll = () =>{
scrollTableRef.value = document.querySelector(`.${props.tableClassName} .ep-scrollbar_wrap`) // .ep-scrollbar_wrap需要你审查滚动条的元素,此处不同版本element-table可能不同
scrollTableRef.value?.addEventListener('scroll',()=>{ emit('handleScroll',scrollTableRef.value.scrollLeft)})
}
setTimeout(()=>{
syncScroll()
},1000)
</script>
使用
<template>
<el-row>
<el-col :span="12">
<custom-table :tableData="tableData" tableClassName="tableLeftClassName" :scrollValue="scrollTableRight" @handleScroll="handleScrollLeft"/>
</el-col>
<el-col :span="12">
<custom-table :tableData="tableDataRight" tableClassName="tableRightClassName" :scrollValue="scrollTableLeft" @handleScroll="handleScrollRight"/>
</el-col>
</el-row>
</template>
<script lang="ts" setup>
import { onMounted, ref, PropType, watch } from 'vue'
import customTable from './custom-table.vue'
const scrollTableLeft= ref<number>()
const scrollTableRight= ref<number>()
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
const tableDataRight= [
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
const handleScrollLeft = (val:number)=>{
scrollTableLeft.value = val
}
const handleScrollRight= (val:number)=>{
scrollTableRight.value = val
}
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)