当前位置：首页 > ops >正文

【自定义指令】（el-table表格内容自动轮播）

ops 2025/9/3 22:58:17

// el-table 自动轮播
import { nextTick } from 'vue'; export default {bind(el, binding) {const time = binding.value?.time || 100;let speed = binding.value?.speed || 1;const loop = binding.value?.loop || true;const timeLoop = binding.value?.timeLoop || true;const wrapper = el.querySelector('.el-table__body-wrapper');wrapper.__isExecute__ = false;nextTick(() => {wrapper.__vueAutoScroll__ = () => {if (wrapper.clientHeight >= wrapper.scrollHeight) {return;}clearInterval(wrapper.__vueScrollTimeout__);if (timeLoop && wrapper.__isExecute__) {wrapper.scrollTop = 0;}clearInterval(wrapper.__vueScrollInterval__);wrapper.__vueScrollInterval__ = setInterval(() => {wrapper.__isExecute__ = false;wrapper.scrollTop += speed;if (wrapper.clientHeight + wrapper.scrollTop === wrapper.scrollHeight) {if (loop) wrapper.scrollTop = 0;else {clearInterval(wrapper.__vueScrollInterval__)}wrapper.__isExecute__ = true;if (timeLoop && wrapper.__isExecute__) {clearInterval(wrapper.__vueScrollInterval__)// 如需立即开始请注释以下两段代码clearInterval(wrapper.__vueScrollTimeout__);wrapper.__vueAutoScroll__();}}}, time);};wrapper.addEventListener('mouseenter', () => {clearInterval(wrapper.__vueScrollInterval__)clearInterval(wrapper.__vueScrollTimeout__);});})wrapper.addEventListener('mouseleave', () => {wrapper.__vueAutoScroll__()});},componentUpdated(el) {const wrapper = el.querySelector('.el-table__body-wrapper');nextTick(() => {if (wrapper.__vueAutoScroll__) {wrapper.__vueAutoScroll__();}});},unbind(el) {const wrapper = el.querySelector('.el-table__body-wrapper');clearInterval(wrapper.__vueScrollInterval__);clearInterval(wrapper.__vueScrollTimeout__);wrapper.removeEventListener('mouseenter', () => {clearInterval(wrapper.__vueScrollInterval__)clearInterval(wrapper.__vueScrollTimeout__);});wrapper.removeEventListener('mouseleave', wrapper.__vueAutoScroll__);}
}

使用：

<el-table :data="channelData" v-elTableAutoScroll size="mini" class="mini-space" max-height="121px"style="width: 100%;"><el-table-column prop="name" label="XXX" show-overflow-tooltip> </el-table-column>...</el-table><script>import elTableAutoScrollbar from '@/utils/scroll.js';
export default {name: 'cannelSize',directives: {elTableAutoScroll: elTableAutoScrollbar},</script>