tableList.vue

<template>
  <div class="en-table">
    <el-table
      stripe
      :data="tableData"
      style="width: 100%"
      :row-class-name="differentStateColor"
      :header-cell-style="{
        background: 'rgba(0, 151, 255, 0.08)',
        color: '#333333'
      }"
    >
      <el-table-column align="center" label="序号" width="100">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <template v-for="item in tableColums">
        <el-table-column
          :key="item.id"
          v-if="item.slot"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.align"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <slot :name="item.prop" :scope="scope.row"></slot>
          </template>
        </el-table-column>
        <el-table-column
          :key="item.id"
          v-else
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.align"
          header-align="center"
          align="center"
        >
        </el-table-column>
      </template>

      <el-table-column
        v-if="showOpr"
        align="center"
        label="操作"
        fixed="right"
        :width="opNum * 80"
      >
        <template slot-scope="scope">
          <slot name="operation" :scope="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'table-list',
  props: {
    tableData: {
      type: Array
    },
    tableColums: {
      type: Array
    },
    opNum: {
      type: Number,
      default: 3
    },
    showOpr: {
      type: Boolean,
      default: true
    },
    // 展示每行状态颜色
    showStateColor: {
      type: Boolean,
      default: false
    },
    // 人工模式
    currentMode: {
      type: Number,
      default: null
    }
  },
  data() {
    return {}
  },
  methods: {
    // 不同状态颜色
    differentStateColor({ row, rowIndex }) {
      if (this.showStateColor == false) return
      if (row.modeTypes === null || this.currentMode === 0) {
        // 原有
        return ''
      } else if (row.modeTypes.includes(1) && this.currentMode == '1') {
        // 供暖模式
        return 'table-row-mode'
      } else if (row.modeTypes.includes(2) && this.currentMode == '2') {
        // 机械通风
        return 'table-row-mechanical'
      } else if (row.modeTypes.includes(3) && this.currentMode == '3') {
        // 自然通风
        return 'table-row-natural'
      }
    }
  }
}
</script>
<style lang="scss">
.record-color {
  color: #0097ff;
}
.marg_r_18 {
  margin-right: 18px;
}
.marg_r_8 {
  margin-right: 8px;
}
.en-table {
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    margin: 0 !important;
  }
  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    color: #32a5ea !important;
    background-color: red !important;
  }
}
</style>