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

// 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>