Element Table轮播表格实现

效果图

 

 

具体实现

  1.  <el-table>标签，就是官网的例子
 1 <el-table
 2               :data="sxgl"
 3               border
 4               style="width: 100%"
 5               align="center"
 6               size="mini"
 7               id="dbM"
 8             >
 9               <el-table-column prop="name" label="事项名称"> </el-table-column>
10               <el-table-column prop="status" label="状态"> </el-table-column>
11               <el-table-column label="操作">
12                 <template slot-scope="scope">
13                   <el-button
14                     type="primary"
15                     plain
16                     size="mini"
17                     v-text="scope.row.status == '未办理' ? '办理' : '详情'"
18                     >办理</el-button
19                   >
20                 </template>
21               </el-table-column>
22             </el-table>

 

　　2. vue 生命周期 created 中添加

 1 created() {
 2     this.getData();
 3     var isScroll = true;
 4     this.$nextTick(() => {
 5       let div = document.getElementsByClassName("el-table__body-wrapper")[0];
 6       div.style.height = "110px";
 7       this.addEvent(div, "mouseenter", function() {
 8         isScroll = false;
 9       });
10       this.addEvent(div, "mouseleave", function() {
11         isScroll = true;
12       });
13       let t = document.getElementsByClassName("el-table__body")[0];
14       setInterval(() => {
15         if (isScroll) {
16           var data = this.sxgl[0];
17           setTimeout(() => {
18             this.sxgl.push(data);
19             t.style.transition = "all .5s";
20             t.style.marginTop = "-41px";
21           }, 500);
22           setTimeout(() => {
23             this.sxgl.splice(0, 1);
24             t.style.transition = "all 0s ease 0s";
25             t.style.marginTop = "0";
26           }, 1000);
27         }
28       }, 2500);
29     });
30   },

 

注意红色的部分，一定要绑定对dom才会实现动画效果。 

 

posted @ 2021-03-05 15:55  一直傲娇的鲨鱼  阅读(4474)  评论(10)  编辑  收藏  举报