el-table表格循环升级版

<template>

  <div

    :style="{

      width: width,

      marginTop: marginTop,

      marginRight: marginRight,

      marginBottom: marginBottom,

      marginLeft: marginLeft,

    }"

  >

    <el-table

      :stripe="stripe"

      :data="tableList"

      ref="table"

      :height="height"

      :header-cell-style="{

        background: headerBacd,

        color: headerColor,

        borderBottom: '0px',

      }"

      :row-style="{ background: rowBacd, color: rowColor }"

      :cell-style="{ borderBottom: borderBottom }"

    >

      <el-table-column

        :prop="item.props"

        :label="item.label"

        :width="item.width"

        v-for="(item, index) in headerList"

        :key="index"

      >

        <template slot-scope="scope">

          <span v-if="scope.row.name=='火警' && index==0" class="iconfont" style="color: #f00">&#xe66f;</span>

          <span v-if="scope.row.name=='故障' && index==0" class="iconfont" style="color: #f00">&#xe668;</span>

          <span v-if="scope.row.name=='报警' && index==0" class="iconfont" style="color: #f00">&#xe670;</span>

          <!-- <span>{{ scope.row.name }}</span> -->

          <span>{{ scope.row[item.props] }}</span>

        </template>

      </el-table-column>

    </el-table>

  </div>

</template>

<script>

export default {

  data() {

    return {};

  },

  props: {

    headerList: {

      type: Array,

      default: () => [],

    },

    tableList: {

      type: Array,

      default: () => [],

    },

    width: {

      type: String,

    },

    marginTop: {

      type: String,

    },

    marginRight: {

      type: String,

    },

    marginBottom: {

      type: String,

    },

    marginLeft: {

      type: String,

    },

    height: {

      type: Number,

      default: 234,

    },

    headerBacd: {

      type: String,

      default: "#012b5a",

    },

    headerColor: {

      type: String,

      default: "#02d4ff",

    },

    rowBacd: {

      type: String,

      default: "#02194a",

    },

    rowColor: {

      type: String,

      default: "#7a87b6",

    },

    borderBottom: {

      type: String,

      default: "1px solid #33385b",

    },

    stripe: {

      type: Boolean,

      default: true,

    },

  },

  methods: {},

  mounted() {

    // 拿到表格挂载后的真实DOM

    const table = this.$refs.table;

    // 拿到表格中承载数据的div元素

    const divData = table.bodyWrapper;

    // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)

    setInterval(() => {

      // 元素自增距离顶部1像素

      divData.scrollTop += 40;

      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)

      if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {

        // 重置table距离顶部距离

        divData.scrollTop = 0;

      }

    }, 2000);

  },

};

</script>

<style lang="stylus" scoped>

.el-table::before {

  height: 0px;

}

/deep/ .el-table__body-wrapper::-webkit-scrollbar {

  width: 0px; // 横向滚动条

  height: 0px;

}

/deep/ .el-table__body-wrapper {

  background: #02133a;

}

/deep/ .gutter {

  background: #02133a !important;

}

/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {

  background-color: #5b769e;

  border-radius: 3px;

}

/deep/ .el-table__header th {

  padding: 0;

  height: 34px;

  font-size: 12px;

}

/deep/ .el-table__body td {

  padding: 0;

  height: 40px;

  font-size: 12px;

}

/deep/ .el-table__row {

  background-color: #02133a !important;

}

/deep/ .el-table__row--striped td {

  background-color: #021333 !important;

}

</style>