更新记录

0.0.1（2025-01-17）

• 初始版本

平台兼容性

n-scroll-table 循环滚动表格

主要用于表格中的内容较多，但又不希望手动去滚动，希望其自动循环滚动以展示信息内容时使用

安装

在插件市场导入即可，首次导入可能需要重新编译

代码演示

基础用法

通过传入columns来标识表格字段列表（columns中的两个字段名固定为code以及name），sources传入数据源

<template>
    <n-scroll-table class="table-container" :columns="columns" :sources="sources"></n-scroll-table>
</template>

<script>
    export default {
        data() {
            return {
                columns: [
                    {
                        code: "name",
                        name: "姓名"
                    },
                    {
                        code: "age",
                        name: "年龄"
                    },
                    {
                        code: "score",
                        name: "成绩"
                    }
                ],
                sources: [
                    {
                        name: "张三",
                        age: 14,
                        score: 87
                    },
                    {
                        name: "李四",
                        age: 15,
                        score: 99
                    },
                    {
                        name: "王五",
                        age: 18,
                        score: 112
                    },
                    {
                        name: "赵六",
                        age: 12,
                        score: 105
                    },
                    {
                        name: "波七",
                        age: 16,
                        score: 142
                    },
                    {
                        name: "虎八",
                        age: 17,
                        score: 138
                    }
                ]
            }
        }
    }
</script>
<style lang="scss">
    .table-container {
        max-height: 300upx;
        overflow: hidden;
    }
</style>

动画

通过传入duration控制单次动画时长,通过timing控制动画过渡效果，通过delay控制每次动画间隔时长（不推荐将delay设置为0，可能会有问题）

<template>
    <n-scroll-table :columns="columns" :duration="0.5" timing="linear" :delay="0.5" :sources="sources"></n-scroll-table>
</template>

行号

通过设置row-index为true，即可打开行号展示

<template>
    <n-scroll-table row-index :columns="columns" :sources="sources"></n-scroll-table>
</template>

自定义样式

你可以在父级页面，通过设置样式的方式，美化表格（建议为组件传入一个特定样式名，以防止影响其它组件）

<n-scroll-table class="custom-style" row-index :columns="columns" :sources="sources"></n-scroll-table>

/deep/ .custom-style.n-scroll-table-container {
    .n-scroll-table-header {
        background-color: #02b9ff;
        color: #FFF;
    }
    .n-scroll-table-row {
        background-color: #0a2732;
        color: #FFF;
        &.odd {
            background-color: #003b54;
        }
    }
}

定制元素

可以通过制定code名的插槽，用于设置对应字段在表格中的展示效果

<template>
    <n-scroll-table row-index :columns="columns" :sources="sources">
        <template #score="scope">
            <text :class="['text-score', scoreClass(scope.row.score)]">{{scope.row.score}}</text>
        </template>
    </n-scroll-table>
</template>

<script>
    export default {
        data() {
            return {
                columns: [
                    {
                        code: "name",
                        name: "姓名"
                    },
                    {
                        code: "age",
                        name: "年龄"
                    },
                    {
                        code: "score",
                        name: "成绩"
                    }
                ],
                sources: [
                    {
                        name: "张三",
                        age: 14,
                        score: 87
                    },
                    {
                        name: "李四",
                        age: 15,
                        score: 99
                    },
                    {
                        name: "王五",
                        age: 18,
                        score: 112
                    },
                    {
                        name: "赵六",
                        age: 12,
                        score: 105
                    },
                    {
                        name: "波七",
                        age: 16,
                        score: 142
                    },
                    {
                        name: "虎八",
                        age: 17,
                        score: 138
                    }
                ]
            }
        },
        methods: {
            scoreClass(score) {
                if(score < 90) {
                    return "error";
                }else if(score <= 100) {
                    return "warning";
                }else if(score <= 120) {
                    return "primary";
                }else {
                    return "success";
                }
            }
        }
    }
</script>

<style lang="scss">
    .text-score {
        &.error {
            color: #F56C6C;
        }
        &.warning {
            color: #E6A23C;
        }
        &.primary {
            color: #409EFF;
        }
        &.success {
            color: #67C23A;
        }
    }
</style>

API

props

methods

Slots

根据columns的code字段动态生成

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。