element-ui el-table二次封装

实现功能：

1. 滚动条隐藏,两层div，默认滚动条18px

2. 自动循环滚动轮播，悬浮停止

3. 二次封装，formatter，tooltip，链接,自定义操作等功能 代码

自动循环滚动轮播，悬浮停止

定时滚动一行，不足一行，滚到底。

tableScroll () {
      let warp = this.$refs.table.bodyWrapper
      let target = warp.children[0];
      let timer;
      let lineHeight = 48;
      let intervalTime = 2000;
      let setTimer = () => {
        if (timer)
          clearInterval(timer)
        timer = setInterval(() => {
          let top = target.style.marginTop.split('px')[0]
          if (warp.clientHeight - top < target.clientHeight) {
            target.style.marginTop = (top - lineHeight) + 'px'
          } else {
            target.style.marginTop = 0
          }
        }, intervalTime)
      }
      setTimer()
      target.addEventListener('mouseenter', () => {
        clearInterval(timer)
      })
      target.addEventListener('mouseleave', () => {
        setTimer()
      })
    }

二次封装，formatter，tooltip，链接,自定义操作等功能

实现思想，定义每列的属性时，定义该列类型，及该类型对应的方法，再组件中进行判断执行

最终代码：

<template>
  <div class="stable-scroll">
    <div class="stable-scroll_wrap">
      <el-table
        :data="data"
        height="200px"
        ref="table"
      >
        <template v-for="column in columns">
          <el-table-column
            :key="column.id"
            :prop="column.field"
            :label="column.name"
            :min-width="column.width"
            :show-overflow-tooltip="column.showOverflowTooltip"
            v-if="column.class || column.filter"
          >
            <template slot-scope="scope">
              <span :class="column.class?column.class(scope.row):''">
                {{column.filter?column.filter(scope.row):scope.row[column.field]}}
              </span>
            </template>
          </el-table-column>

          <!-- 链接 -->
          <el-table-column
            :key="column.id"
            :prop="column.field"
            :label="column.name"
            :min-width="column.width"
            :show-overflow-tooltip="column.showOverflowTooltip"
            v-else-if="column.link"
          >
            <template slot-scope="scope">
              <a
                :href="scope.row[column.id]"
                :class="column.class?column.class(scope.row):''"
              >
                {{column.filter?column.filter(scope.row):scope.row[column.field]}}
              </a>
            </template>
          </el-table-column>

          <!-- 操作 -->
          <el-table-column
            :key="column.id"
            :prop="column.field"
            :label="column.name"
            :min-width="column.width"
            v-else-if="column.operator"
          >
            <template slot-scope="scope">
              <span
                v-for="operator in column.operator(scope.row)"
                :key="operator.id"
                @click="(operator['func'])(scope.row)"
              >
                {{operator['name']}}
              </span>
            </template>
          </el-table-column>
          <!-- 悬浮弹窗 -->
          <el-table-column
            :key="column.id"
            :prop="column.field"
            :label="column.name"
            :min-width="column.width"
            v-else-if="column.hoverable"
          >
            <template slot-scope="scope">
              <el-popover
                placement="top"
                trigger="hover"
                width="200"
              >
                <slot
                  name="popover"
                  :row="scope.row"
                ></slot>
                <div
                  slot="reference"
                  class="name-wrapper"
                >
                  <span>{{column.filter?column.filter(scope.row):scope.row[column.field]}}</span>
                </div>
              </el-popover>

            </template>
          </el-table-column>
          <el-table-column
            :key="column.id"
            :prop="column.field"
            :label="column.name"
            :show-overflow-tooltip="column.showOverflowTooltip"
            :min-width="column.width"
            v-else
          >
          </el-table-column>
        </template>

      </el-table>
    </div>
  </div>

</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    scrolling: {
      type: Boolean,
      default: false
    }

  },
  data () {
    return {
    }
  },
  mounted () {

    if (this.scrolling)
      this.tableScroll()
  },
  methods: {
    tableScroll () {
      let warp = this.$refs.table.bodyWrapper
      let target = warp.children[0];
      let timer;
      let lineHeight = 48;
      let intervalTime = 2000;
      let setTimer = () => {
        if (timer)
          clearInterval(timer)
        timer = setInterval(() => {
          let top = target.style.marginTop.split('px')[0]
          if (warp.clientHeight - top < target.clientHeight) {
            target.style.marginTop = (top - lineHeight) + 'px'
          } else {
            target.style.marginTop = 0
          }
        }, intervalTime)
      }
      setTimer()
      target.addEventListener('mouseenter', () => {
        clearInterval(timer)
      })
      target.addEventListener('mouseleave', () => {
        setTimer()
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.text-red {
  color: red;
}
.text-yellow {
  color: yellow;
}
.text-green {
  color: green;
}
.stable-scroll {
  width: 100%;
  overflow: hidden;
  &_wrap {
    width: calc(100% + 18px);
  }
  ::v-deep .el-table__body {
    transition: margin-top 0.3s;
  }
}
</style>