vue使用div实现自定义表格table，实现内容向上循环滚动

电脑版发表于：2021/3/30 18:57

效果如下：会循环向上滚动，做成动态图太大了，这里贴一个静态的效果

![](https://img.tnblog.net/arcimg/aojiancc2/1a88fe67cf464f1495ae5873dd7699aa.png)


### 封装的表格代码如下
```

<template>
    <div>
        <div class="scroll_table">
            <div>
            

                
                <div class="scroll_table_header" :class="rowStyle">
                    <div v-for="(citem, zindex) in columnsConfg" :key="zindex"
                        :style="{ width: citem.width, paddingLeft: citem.paddingLeft }">
                        {{ citem.label }}</div>
                </div>

                
                <div class="scrollWrap" :style="{
                    height: scrollWrapHeight + 'px',
                    overflowY: 'hidden',
                }">
                    
                    <div class="scroll_table_body" @mouseleave="toStartRun" @mouseenter="toPausedRun" :class="[scrollNum > 1 ? 'scroll' : '', animationPlayState]" :style="{
                        animationDuration: runSpeed + 's',
                    }" v-for="(a, index) in scrollNum" :key="index">

                        
                        <div style="display: flex;" v-for="(item, index) in rowdata" :key="index" class="content_tr"
                            :class="rowStyle">

                            
                            <div v-for="(citem, zindex) in columnsConfg" :key="zindex"
                                :style="{ width: citem.width, paddingLeft: citem.paddingLeft }">
                                {{ item[citem.prop] }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
    

<script >
export default {
    // 组件名字
    name: 'ScrollTable',
    // 组件参数
    props: {
        // 行的显示风格，居中或者左对齐等，可以根据需要多写几套样式   
        rowStyle: {
            type: String,
            default: 'content_tr_center'
        },
        // 滚动层的高度。可以把参数传递成表格的高度，滚动层的高度就等于表格的高度减去表头的高度,其实都无所谓怎么传递都可以
        scrollContentHeight:{
            type: Number,
            default: 350
        },
        // 滚动速度
        runSpeed:{
            type: Number,
            default: 15
        },
        // 列配置
        columnsConfg: {
            type: Array,
            default: () => {
                return []
            },
        },
        // 数据项
        rowdata: {
            type: Array,
            default: () => {
                return []
            },
            // required: true
        }
    },
    data() {
        return {
            // 配置默认是否滚动。animationPlayStatePaused(暂停)，animationPlayStateRun(滚动)
            animationPlayState: "animationPlayStateRun",
            // 调节滚动速率。这个可以设置成参数从外边传递过来
            // time: 15,
        }
    },
    computed: {
        // 滚动层高度
        scrollWrapHeight: function () {
            /* 其实就是表格整体高度减去表头高度，可以写死，也可以动态计算一下，如果表头高度需要进行参数传递的话。       
               当然也可以直接传递滚动层的高度，就不用去减去表头的高度了，根据实际情况来就行了
            */
            // return 350
            return this.scrollContentHeight
        },
        // 滚动层份数，当内容溢出scrollWrapHeight，复制两份，添加滚动动画
        // 否则就一份，不填加滚动动画
        scrollNum: function () {
            // 41是每行的高度，可以写死，也可以通过参数传递进来
            let successHeight = this.rowdata.length * 41
            // alert(successHeight)
            // alert(this.scrollWrapHeight)
            if (successHeight > this.scrollWrapHeight) {
                return 2
            } else {
                return 1
            }
        },
    },
    mounted() {
    },
    beforeDestroy() {
    },
    methods: {
        // 暂停滚动
        toPausedRun() {
            this.animationPlayState = "animationPlayStatePaused"
        },
        // 开始滚动
        toStartRun() {
            this.animationPlayState = "animationPlayStateRun"
        }
    }
}
</script>
    
  
<style lang="scss" scoped>
.scroll_table {
    margin-top: 20px;
    width: 100%;
    border-collapse: collapse;

    .scrollWrap::-webkit-scrollbar {
        width: 0 !important;
    }

    .scroll {
        animation: scrollData 10s infinite linear;
    }

    .animationPlayStateRun {
        animation-play-state: running;
    }

    .animationPlayStatePaused {
        animation-play-state: paused;
    }

    @keyframes scrollData {
        from {
            transform: translateY(0px);
        }

        to {
            transform: translateY(-100%);
        }
    }

    // 表头样式
    .scroll_table_header {
        background-color: rgba(13, 81, 137, 0.5);
        // opacity: 0.5;
        display: flex;
        // padding: 0 10px 0 10px;

        div {
            height: 33px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #23FFFC;
            line-height: 33px;
            // padding-left: 10px;
        }
    }

    .content_tr {
        height: 41px;
        // background: #082044;
        background-color: rgba(8, 32, 68, 0.4);

        div {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 33px;
            height: 33px;
            //   padding-left: 10px;
        }

        // div:last-child {
        //     flex: 1;
        // }

    }

    //----------- 行风格-左对齐  --------------
    .content_tr_left {
        div {
            text-align: left;
        }
    }

    //----------- 行风格-居中  --------------
    .content_tr_center {
        div {
            text-align: center;
        }
    }
}
</style>
```
### 使用封装的循环滚动的表格组件

引入组件
```
import ScrollTable from '@/views/component/scrollTable.vue'
export default {
    components: {
        ScrollTable,
    },
```
#### 左边那块的表格
```
<ScrollTable rowStyle="content_tr_center" :runSpeed=22 :scrollContentHeight=310 :columnsConfg="learDataColumnsConfg"
    :rowdata="rowdata">
</ScrollTable>
```
这里配置了行的对其方式是居中，滚动速度runSpeed为22，内容高度scrollContentHeight为310像数。

**列配置如下**
```
learDataColumnsConfg: [
    {
        label: "班级名称",
        prop: "name",
        width: "150px",
        paddingLeft: "0px"
    },
    {
        label: "班主任",
        prop: "class",
        width: "90px",
        paddingLeft: "0px"
    },
    {
        label: "评估",
        prop: "content",
        width: "90px",
        paddingLeft: "0px"
    },
    {
        label: "实验",
        prop: "datetiem",
        width: "90px",
        paddingLeft: "0px"
    },
    {
        label: "项目",
        prop: "pro",
        width: "90px",
        paddingLeft: "0px"
    },
    {
        label: "综合",
        prop: "zh",
        width: "90px",
        paddingLeft: "0px"
    },
    {
        label: "排名",
        prop: "sort",
        width: "70px",
        paddingLeft: "0px"
    },
],
```
**数据项**
```
rowdata: [
    {
        name: "2022级计算机1班",
        class: "yy1",
        content: "xx",
        datetiem: '66.66',
        pro: "40.66%",
        zh: "50.55%",
        sort: "1"
    },
    {
        name: "2022级计算机1班",
        class: "yy2",
        content: "xx",
        datetiem: '66.66',
        pro: "40.66%",
        zh: "50.55%",
        sort: "3"
    },
    {
        name: "2022级计算机1班",
        class: "yy3",
        content: "xx",
        datetiem: '66.66',
        pro: "40.66%",
        zh: "50.55%",
        sort: "3"
    },
    {
        name: "2022级计算机1班",
        class: "yy2",
        content: "xx",
        datetiem: '66.66',
        pro: "40.66%",
        zh: "50.55%",
        sort: "4"
    },
    {
        name: "2022级计算机1班",
        class: "yy2",
        content: "xx",
        datetiem: '66.66',
        pro: "46.66%",
        zh: "55.55%",
        sort: "5"
    },
    {
        name: "2022级计算机1班",
        class: "yy2",
        content: "xx",
        datetiem: '66.66',
        pro: "90.66%",
        zh: "50.55%",
        sort: "6"
    },
    {
        name: "2022级计算机1班",
        class: "yy3",
        content: "xx",
        datetiem: '76.76',
        pro: "39.66%",
        zh: "59.55%",
        sort: "7"
    },
    {
        name: "2022级计算机1班",
        class: "yy3",
        content: "xx",
        datetiem: '76.76',
        pro: "39.66%",
        zh: "59.55%",
        sort: "8"
    },
    {
        name: "2022级计算机1班",
        class: "yy3",
        content: "xx",
        datetiem: '76.76',
        pro: "39.66%",
        zh: "59.55%",
        sort: "9"
    }
],
```

#### 右边那块的表格
```
<ScrollTable rowStyle="content_tr_left" :runSpeed=20 :columnsConfg="columnsConfg"
    :rowdata="newrowdata">
</ScrollTable>
```

**列配置如下**
```
columnsConfg: [
    {
        label: "姓名",
        prop: "name",
        width: "70px",
        paddingLeft: "20px"
    },
    {
        label: "班级",
        prop: "class",
        width: "160px",
        paddingLeft: "20px"
    },
    {
        label: "事件",
        prop: "content",
        width: "309px",
        paddingLeft: "0px"
    },
    {
        label: "时间",
        prop: "datetiem",
        width: "100px",
        paddingLeft: "0px"
    }
],
```
我们表格配置了rowStyle="content_tr_left"，表示左对齐，然后在行配置的时候第一行，第二行我们都配置了paddingLeft: "20px"，表示距离左边一点间距。
我们这个组件里边封装的列配置目前可以支持配置显示的字段、配置列的宽度、列的名称(对应生成表头)、列的某些样式，比如我这里设置了padding-left，还需要什么灵活的配置都可以自己实现。

**这个表格的数据项配置**
随便贴几条就行了
```
newrowdata: [
    {
        name: "张三丰",
        class: "2022级计算机1班",
        content: "通过什么什么什么什么什么评估",
        datetiem: '8-15 09:33:52',
    },
    {
        name: "张三丰",
        class: "2022级计算机1班",
        content: "通过什么什么什么什么什么评估通过什么什么通",
        datetiem: '8-15 09:33:52',
    },
    {
        name: "张三丰",
        class: "2022级计算机1班",
        content: "通过什么什么什么什么什么评估通过什么什么通",
        datetiem: '8-15 09:33:52',
    },
],
```
注意如果数据少了它不会滚动的，至少需要数据的高度要超过一屏的高度，也就是我们传递的滚动区域的高度，这个是可以自己控制的。

### 优化一下列配置，如果不传递paddingLeft就不添加paddingLeft样式

现在是如果不想设置paddingLeft还需要传递一个paddingLeft：0。我们解析的时候都是赋值了的，我们需要处理一下，如果没有传递就不加这个样式
![](https://img.tnblog.net/arcimg/aojiancc2/47b31c4e89bc42d8ae3c2e80e0d8c531.png)

**解决方式就是封装一个方法，判断一下有没有对应的配置，有就增加上去**
![](https://img.tnblog.net/arcimg/aojiancc2/d9815abdcd6041f38b6b1dc6af9c97f2.png)

使用的时候就不在绑定的时候写死样式了，而是通过方法处理后返回需要绑定的样式，这样就会更灵活一点，方法处理起来也很方便
![](https://img.tnblog.net/arcimg/aojiancc2/655cec68c5a247f5b741db1ce7f97084.png)

### 实现一下，列宽度超过配置的宽度就出现省略号

这个很简单给单元格加一点样式就行了
```
.content_tr {
    height: 41px;
    // background: #082044;
    background-color: rgba(8, 32, 68, 0.4);

    div {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 33px;
        height: 33px;

        //超出出现省略号
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        //   padding-left: 10px;
    }
    // div:last-child {
    //     flex: 1;
    // }
}
```

### 增加一个是否滚动的配置
增加一个是否滚动的配置
```
// 组件参数
props: {
    // 行的显示风格，居中或者左对齐等，可以根据需要多写几套样式   
    rowStyle: {
        type: String,
        default: 'content_tr_center'
    },
    // 滚动速度
    runSpeed: {
        type: Number,
        default: 15
    },
    // --------------增加一个是否滚动的配置------------
    isRun: {
        type: Boolean,
        default: true
    },
},
```
判断是否滚动的时候增加一个这个条件的判断即可:
![](https://img.tnblog.net/arcimg/aojiancc2/5b57753dfdb14db8acac2bc3d9f171ca.png)

使用的时候如果不需要滚动就把这个参数设置成false即可:
```
<ScrollTable rowStyle="content_tr_center" :isRun="false" animationPlayState="animationPlayStatePaused" :runSpeed="classDataRunSpeed" :scrollContentHeight=310
    :columnsConfg="classDataColumnsConfg" :rowdata="classDataRowdata">
</ScrollTable>
```


下一步还要继续优化的话，我们可以实现宽度没有配置的话就做自适应等的效果等。

剑轩

vue使用div实现自定义表格table，实现内容向上循环滚动

{{item.title}}