收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

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

3494人阅读 2021/3/30 18:57 总访问：5182870 评论：0 收藏：0 手机
分类: 前端

效果如下：会循环向上滚动，做成动态图太大了，这里贴一个静态的效果

封装的表格代码如下

  1. <!-- 封装可以循环滚动的table -->
  2. <template>
  3.     <div>
  4.         <div class="scroll_table">
  5.             <div>
  6.             <!-- <div class="scroll_table_header" style="display: flex;padding: 0 10px 0 10px;">
  7.                     <div style="width: 50px;">姓名</div>
  8.                     <div style="width: 153px;">班级</div>
  9.                     <div style="width: 187px;">事件</div>
  10.                     <div>时间</div>
  11.                                     </div> -->
  13.                 <!-- 根据列配置动态生成表头。先简单的处理一下表头的列宽，让表头的宽度保持和列宽一样 -->
  14.                 <div class="scroll_table_header" :class="rowStyle">
  15.                     <div v-for="(citem, zindex) in columnsConfg" :key="zindex"
  16.                         :style="{ width: citem.width, paddingLeft: citem.paddingLeft }">
  17.                         {{ citem.label }}</div>
  18.                 </div>
  20.                 <!-- 可以让表格滚动的包裹层 -->
  21.                 <div class="scrollWrap" :style="{
  22.                     height: scrollWrapHeight + 'px',
  23.                     overflowY: 'hidden',
  24.                 }">
  25.                     <!-- 让表格循环滚动的动画样式添加，以及滚动时间的样式设置等 -->
  26.                     <div class="scroll_table_body" @mouseleave="toStartRun" @mouseenter="toPausedRun" :class="[scrollNum > 1 ? 'scroll' : '', animationPlayState]" :style="{
  27.                         animationDuration: runSpeed + 's',
  28.                     }" v-for="(a, index) in scrollNum" :key="index">
  30.                         <!-- 具体的表格数据 -->
  31.                         <div style="display: flex;" v-for="(item, index) in rowdata" :key="index" class="content_tr"
  32.                             :class="rowStyle">
  34.                             <!-- 根据传递进来的列配置来动态解析数据以及列宽是多少 -->
  35.                             <div v-for="(citem, zindex) in columnsConfg" :key="zindex"
  36.                                 :style="{ width: citem.width, paddingLeft: citem.paddingLeft }">
  37.                                 {{ item[citem.prop] }}
  38.                             </div>
  39.                         </div>
  40.                     </div>
  41.                 </div>
  42.             </div>
  43.         </div>
  45.     </div>
  46. </template>
  49. <script >
  50. export default {
  51.     // 组件名字
  52.     name: 'ScrollTable',
  53.     // 组件参数
  54.     props: {
  55.         // 行的显示风格，居中或者左对齐等，可以根据需要多写几套样式   
  56.         rowStyle: {
  57.             type: String,
  58.             default: 'content_tr_center'
  59.         },
  60.         // 滚动层的高度。可以把参数传递成表格的高度，滚动层的高度就等于表格的高度减去表头的高度,其实都无所谓怎么传递都可以
  61.         scrollContentHeight:{
  62.             type: Number,
  63.             default: 350
  64.         },
  65.         // 滚动速度
  66.         runSpeed:{
  67.             type: Number,
  68.             default: 15
  69.         },
  70.         // 列配置
  71.         columnsConfg: {
  72.             type: Array,
  73.             default: () => {
  74.                 return []
  75.             },
  76.         },
  77.         // 数据项
  78.         rowdata: {
  79.             type: Array,
  80.             default: () => {
  81.                 return []
  82.             },
  83.             // required: true
  84.         }
  85.     },
  86.     data() {
  87.         return {
  88.             // 配置默认是否滚动。animationPlayStatePaused(暂停)，animationPlayStateRun(滚动)
  89.             animationPlayState: "animationPlayStateRun",
  90.             // 调节滚动速率。这个可以设置成参数从外边传递过来
  91.             // time: 15,
  92.         }
  93.     },
  94.     computed: {
  95.         // 滚动层高度
  96.         scrollWrapHeight: function () {
  97.             /* 其实就是表格整体高度减去表头高度，可以写死，也可以动态计算一下，如果表头高度需要进行参数传递的话。       
  98.                当然也可以直接传递滚动层的高度，就不用去减去表头的高度了，根据实际情况来就行了
  99.             */
  100.             // return 350
  101.             return this.scrollContentHeight
  102.         },
  103.         // 滚动层份数，当内容溢出scrollWrapHeight，复制两份，添加滚动动画
  104.         // 否则就一份，不填加滚动动画
  105.         scrollNum: function () {
  106.             // 41是每行的高度，可以写死，也可以通过参数传递进来
  107.             let successHeight = this.rowdata.length * 41
  108.             // alert(successHeight)
  109.             // alert(this.scrollWrapHeight)
  110.             if (successHeight > this.scrollWrapHeight) {
  111.                 return 2
  112.             } else {
  113.                 return 1
  114.             }
  115.         },
  116.     },
  117.     mounted() {
  118.     },
  119.     beforeDestroy() {
  120.     },
  121.     methods: {
  122.         // 暂停滚动
  123.         toPausedRun() {
  124.             this.animationPlayState = "animationPlayStatePaused"
  125.         },
  126.         // 开始滚动
  127.         toStartRun() {
  128.             this.animationPlayState = "animationPlayStateRun"
  129.         }
  130.     }
  131. }
  132. </script>
  135. <style lang="scss" scoped>
  136. .scroll_table {
  137.     margin-top: 20px;
  138.     width: 100%;
  139.     border-collapse: collapse;
  141.     .scrollWrap::-webkit-scrollbar {
  142.         width: 0 !important;
  143.     }
  145.     .scroll {
  146.         animation: scrollData 10s infinite linear;
  147.     }
  149.     .animationPlayStateRun {
  150.         animation-play-state: running;
  151.     }
  153.     .animationPlayStatePaused {
  154.         animation-play-state: paused;
  155.     }
  157.     @keyframes scrollData {
  158.         from {
  159.             transform: translateY(0px);
  160.         }
  162.         to {
  163.             transform: translateY(-100%);
  164.         }
  165.     }
  167.     // 表头样式
  168.     .scroll_table_header {
  169.         background-color: rgba(13, 81, 137, 0.5);
  170.         // opacity: 0.5;
  171.         display: flex;
  172.         // padding: 0 10px 0 10px;
  174.         div {
  175.             height: 33px;
  176.             font-size: 14px;
  177.             font-family: Microsoft YaHei;
  178.             font-weight: 400;
  179.             color: #23FFFC;
  180.             line-height: 33px;
  181.             // padding-left: 10px;
  182.         }
  183.     }
  185.     .content_tr {
  186.         height: 41px;
  187.         // background: #082044;
  188.         background-color: rgba(8, 32, 68, 0.4);
  190.         div {
  191.             font-size: 12px;
  192.             font-family: Microsoft YaHei;
  193.             font-weight: 400;
  194.             color: #FFFFFF;
  195.             line-height: 33px;
  196.             height: 33px;
  197.             //   padding-left: 10px;
  198.         }
  200.         // div:last-child {
  201.         //     flex: 1;
  202.         // }
  204.     }
  206.     //----------- 行风格-左对齐  --------------
  207.     .content_tr_left {
  208.         div {
  209.             text-align: left;
  210.         }
  211.     }
  213.     //----------- 行风格-居中  --------------
  214.     .content_tr_center {
  215.         div {
  216.             text-align: center;
  217.         }
  218.     }
  219. }
  220. </style>

使用封装的循环滚动的表格组件

引入组件

  1. import ScrollTable from '@/views/component/scrollTable.vue'
  2. export default {
  3.     components: {
  4.         ScrollTable,
  5.     },

左边那块的表格

  1. <ScrollTable rowStyle="content_tr_center" :runSpeed=22 :scrollContentHeight=310 :columnsConfg="learDataColumnsConfg"
  2.     :rowdata="rowdata">
  3. </ScrollTable>

这里配置了行的对其方式是居中，滚动速度runSpeed为22，内容高度scrollContentHeight为310像数。

列配置如下

  1. learDataColumnsConfg: [
  2.     {
  3.         label: "班级名称",
  4.         prop: "name",
  5.         width: "150px",
  6.         paddingLeft: "0px"
  7.     },
  8.     {
  9.         label: "班主任",
  10.         prop: "class",
  11.         width: "90px",
  12.         paddingLeft: "0px"
  13.     },
  14.     {
  15.         label: "评估",
  16.         prop: "content",
  17.         width: "90px",
  18.         paddingLeft: "0px"
  19.     },
  20.     {
  21.         label: "实验",
  22.         prop: "datetiem",
  23.         width: "90px",
  24.         paddingLeft: "0px"
  25.     },
  26.     {
  27.         label: "项目",
  28.         prop: "pro",
  29.         width: "90px",
  30.         paddingLeft: "0px"
  31.     },
  32.     {
  33.         label: "综合",
  34.         prop: "zh",
  35.         width: "90px",
  36.         paddingLeft: "0px"
  37.     },
  38.     {
  39.         label: "排名",
  40.         prop: "sort",
  41.         width: "70px",
  42.         paddingLeft: "0px"
  43.     },
  44. ],

数据项

  1. rowdata: [
  2.     {
  3.         name: "2022级计算机1班",
  4.         class: "yy1",
  5.         content: "xx",
  6.         datetiem: '66.66',
  7.         pro: "40.66%",
  8.         zh: "50.55%",
  9.         sort: "1"
  10.     },
  11.     {
  12.         name: "2022级计算机1班",
  13.         class: "yy2",
  14.         content: "xx",
  15.         datetiem: '66.66',
  16.         pro: "40.66%",
  17.         zh: "50.55%",
  18.         sort: "3"
  19.     },
  20.     {
  21.         name: "2022级计算机1班",
  22.         class: "yy3",
  23.         content: "xx",
  24.         datetiem: '66.66',
  25.         pro: "40.66%",
  26.         zh: "50.55%",
  27.         sort: "3"
  28.     },
  29.     {
  30.         name: "2022级计算机1班",
  31.         class: "yy2",
  32.         content: "xx",
  33.         datetiem: '66.66',
  34.         pro: "40.66%",
  35.         zh: "50.55%",
  36.         sort: "4"
  37.     },
  38.     {
  39.         name: "2022级计算机1班",
  40.         class: "yy2",
  41.         content: "xx",
  42.         datetiem: '66.66',
  43.         pro: "46.66%",
  44.         zh: "55.55%",
  45.         sort: "5"
  46.     },
  47.     {
  48.         name: "2022级计算机1班",
  49.         class: "yy2",
  50.         content: "xx",
  51.         datetiem: '66.66',
  52.         pro: "90.66%",
  53.         zh: "50.55%",
  54.         sort: "6"
  55.     },
  56.     {
  57.         name: "2022级计算机1班",
  58.         class: "yy3",
  59.         content: "xx",
  60.         datetiem: '76.76',
  61.         pro: "39.66%",
  62.         zh: "59.55%",
  63.         sort: "7"
  64.     },
  65.     {
  66.         name: "2022级计算机1班",
  67.         class: "yy3",
  68.         content: "xx",
  69.         datetiem: '76.76',
  70.         pro: "39.66%",
  71.         zh: "59.55%",
  72.         sort: "8"
  73.     },
  74.     {
  75.         name: "2022级计算机1班",
  76.         class: "yy3",
  77.         content: "xx",
  78.         datetiem: '76.76',
  79.         pro: "39.66%",
  80.         zh: "59.55%",
  81.         sort: "9"
  82.     }
  83. ],

右边那块的表格

  1. <ScrollTable rowStyle="content_tr_left" :runSpeed=20 :columnsConfg="columnsConfg"
  2.     :rowdata="newrowdata">
  3. </ScrollTable>

列配置如下

  1. columnsConfg: [
  2.     {
  3.         label: "姓名",
  4.         prop: "name",
  5.         width: "70px",
  6.         paddingLeft: "20px"
  7.     },
  8.     {
  9.         label: "班级",
  10.         prop: "class",
  11.         width: "160px",
  12.         paddingLeft: "20px"
  13.     },
  14.     {
  15.         label: "事件",
  16.         prop: "content",
  17.         width: "309px",
  18.         paddingLeft: "0px"
  19.     },
  20.     {
  21.         label: "时间",
  22.         prop: "datetiem",
  23.         width: "100px",
  24.         paddingLeft: "0px"
  25.     }
  26. ],

我们表格配置了rowStyle=”content_tr_left”，表示左对齐，然后在行配置的时候第一行，第二行我们都配置了paddingLeft: “20px”，表示距离左边一点间距。
我们这个组件里边封装的列配置目前可以支持配置显示的字段、配置列的宽度、列的名称(对应生成表头)、列的某些样式，比如我这里设置了padding-left，还需要什么灵活的配置都可以自己实现。

这个表格的数据项配置
随便贴几条就行了

  1. newrowdata: [
  2.     {
  3.         name: "张三丰",
  4.         class: "2022级计算机1班",
  5.         content: "通过什么什么什么什么什么评估",
  6.         datetiem: '8-15 09:33:52',
  7.     },
  8.     {
  9.         name: "张三丰",
  10.         class: "2022级计算机1班",
  11.         content: "通过什么什么什么什么什么评估通过什么什么通",
  12.         datetiem: '8-15 09:33:52',
  13.     },
  14.     {
  15.         name: "张三丰",
  16.         class: "2022级计算机1班",
  17.         content: "通过什么什么什么什么什么评估通过什么什么通",
  18.         datetiem: '8-15 09:33:52',
  19.     },
  20. ],

注意如果数据少了它不会滚动的，至少需要数据的高度要超过一屏的高度，也就是我们传递的滚动区域的高度，这个是可以自己控制的。

优化一下列配置，如果不传递paddingLeft就不添加paddingLeft样式

现在是如果不想设置paddingLeft还需要传递一个paddingLeft：0。我们解析的时候都是赋值了的，我们需要处理一下，如果没有传递就不加这个样式

解决方式就是封装一个方法，判断一下有没有对应的配置，有就增加上去

使用的时候就不在绑定的时候写死样式了，而是通过方法处理后返回需要绑定的样式，这样就会更灵活一点，方法处理起来也很方便

实现一下，列宽度超过配置的宽度就出现省略号

这个很简单给单元格加一点样式就行了

  1. .content_tr {
  2.     height: 41px;
  3.     // background: #082044;
  4.     background-color: rgba(8, 32, 68, 0.4);
  6.     div {
  7.         font-size: 12px;
  8.         font-family: Microsoft YaHei;
  9.         font-weight: 400;
  10.         color: #FFFFFF;
  11.         line-height: 33px;
  12.         height: 33px;
  14.         //超出出现省略号
  15.         overflow: hidden;
  16.         text-overflow:ellipsis;
  17.         white-space: nowrap;
  18.         //   padding-left: 10px;
  19.     }
  20.     // div:last-child {
  21.     //     flex: 1;
  22.     // }
  23. }

增加一个是否滚动的配置

增加一个是否滚动的配置

  1. // 组件参数
  2. props: {
  3.     // 行的显示风格，居中或者左对齐等，可以根据需要多写几套样式   
  4.     rowStyle: {
  5.         type: String,
  6.         default: 'content_tr_center'
  7.     },
  8.     // 滚动速度
  9.     runSpeed: {
  10.         type: Number,
  11.         default: 15
  12.     },
  13.     // --------------增加一个是否滚动的配置------------
  14.     isRun: {
  15.         type: Boolean,
  16.         default: true
  17.     },
  18. },

判断是否滚动的时候增加一个这个条件的判断即可:

使用的时候如果不需要滚动就把这个参数设置成false即可:

  1. <ScrollTable rowStyle="content_tr_center" :isRun="false" animationPlayState="animationPlayStatePaused" :runSpeed="classDataRunSpeed" :scrollContentHeight=310
  2.     :columnsConfg="classDataColumnsConfg" :rowdata="classDataRowdata">
  3. </ScrollTable>

下一步还要继续优化的话，我们可以实现宽度没有配置的话就做自适应等的效果等。


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

vue.js+Layer实现表格数据绑定与更新
一：使用Vue.js绑定好数据与更新事件 使用v-on绑定好事件,在事件里边直接把该行数据传递进去，在更新方法里边就可以直接...

vue.js 实现省市联动
HTML代码&lt;divid=&quot;pro_citys&quot;&gt; 省:&lt;selectid=&quot;provice&quot;v-on:change=&quot;prochange()&quo...

vue.js常见问题
一：花括号当做字符串显示的问题1：检查下绑定到vue.js的id是否重复，如果id重复了，就有可能存在这种问题，因为有可能把数...

vue.js常用指令
v-html可以把字符串当成一个html来渲染，而不是原样输出Html类似.net mvc中的@Html.Raw()方法&lt;divv-html=&quot;item.tit...

干货！div滚动到一定位置就固定他。vue中实现一侧滚动到底部就固定
尊重原创：转载请注名出处div滚动到一定位置就固定他，例如左边的内容很多，右边的内容很少，如果不处理滚动到一定位置后右...

vue.js常用指令，事件绑定等，vue过滤器解析状态过滤器多个参数。vue表格状态解析。vue解析类型，element ui解析类型，状态，el-tag
按照html的编码显示：v-html&lt;div class=&quot;font_info&quot; v-html=&quot;item.Content&quot;&gt;{{item.Content}}&l...

vue.js if用法
vue.js if可以做一些判断例如我们要把下面这个输出varvm=newVue({ el:&quot;#content&quot;, data:{ titles:[&quot;小明...

vue.js 学习日记第一章-安装vue开发环境
官网：https://cn.vuejs.org/v2/guide/ 这是一篇学习性文章，不定时更新，用来记录我学习vue.js的过程。 首先，是v...

vue.js 学习日记第二章-在vue中编写function及一些简单指令
官网：https://cn.vuejs.org/v2/guide/ vue.js 学习日记第一章：http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第三章-vue中的简单事件及事件修饰符
官网：https://cn.vuejs.org/v2/guide/ vue.js 学习日记第二章：http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第四章-vue中文本框数据获取与绑定及computed计算属性
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第三章： http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第五章-v-if和v-for指令的使用方式
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第四章： http://www.tnblog.net/18323015640/article/details/2...

vue.js 学习日记第六章-vue组件初步学习
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第五章： http://www.tnblog.net/18323015640/article/details/2...

vue.js学习日记第七章-搭建脚手架
官网：https://cn.vuejs.org/v2/guide/ vue.js学习日记第六章： http://www.tnblog.net/18323015640/article/details/2...

vue实现好友选中效果
逛过vue官网肯定会发现一个有趣的指令“v-for”，相比与以前拼接html代码确实要上档次一点，而且减少了工作量，先看一波效...

js时间格式化vue.js时间格式化，带T 时间格式化

也可以借助moment库， 参考：https://www.tnblog.net/aojiancc2/article/details/8079moment库有点大，推荐可以使用day.js...