Element Table輪播表格實現

效果圖

 

 

具體實現

1.  <el-table>標簽，就是官網的例子

<el-table
              :data="sxgl"
              border
              style="width: 100%"
              align="center"
              size="mini"
              id="dbM"
            >
              <el-table-column prop="name" label="事項名稱"> </el-table-column>
              <el-table-column prop="status" label="狀態"> </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                    v-text="scope.row.status == '未辦理' ? '辦理' : '詳情'"
                    >辦理</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

 

　　2. vue 生命周期 created 中添加

created() {
    this.getData();
    var isScroll = true;
    this.$nextTick(() => {
      let div = document.getElementsByClassName("el-table__body-wrapper")[0];
      div.style.height = "110px";
      this.addEvent(div, "mouseenter", function() {
        isScroll = false;
      });
      this.addEvent(div, "mouseleave", function() {
        isScroll = true;
      });
      let t = document.getElementsByClassName("el-table__body")[0];
      setInterval(() => {
        if (isScroll) {
          var data = this.sxgl[0];
          setTimeout(() => {
            this.sxgl.push(data);
            t.style.transition = "all .5s";
            t.style.marginTop = "-41px";
          }, 500);
          setTimeout(() => {
            this.sxgl.splice(0, 1);
            t.style.transition = "all 0s ease 0s";
            t.style.marginTop = "0";
          }, 1000);
        }
      }, 2500);
    });
  },

 

注意紅色的部分，一定要綁定對dom才會實現動畫效果。