elementUI tag标签和表格样式设置

1、在vue表格中使用

   <template slot-scope="scope">
          <template v-if="column.prop==='status'">
            <el-tag :type="formatTagType(scope.row.status)">{{ statusArr.labelByValue[scope.row.siteStatus] }}</el-tag>
          </template>
   </template>

2.dict.js 文件中

import { dictGetLabelByValue, dictGetValueByLabel } from '@/api/dictDetail'
let that
export default {
  data() {
    return {
      dictStatus: [],
      // 字典转换相关数据
      statusArr: {
        valueByLabel: '',
        labelByValue: ''
      }
    }
  },
  created() {
    //  所有字典
    this.getNeedDicts()
  },
  beforeCreate() { // 全局this
    that = this
  },

  filters: {
    // 时间过滤器
    filterTime: function(time) {
      if (!time) {
        return ''
      }
      const date = new Date(time)
      const dateNumFun = num => (num < 10 ? `0${num}` : num)
      const [Y, M, D, h, m, s] = [
        // es6 解构赋值
        date.getFullYear(),
        dateNumFun(date.getMonth() + 1),
        dateNumFun(date.getDate()),
        dateNumFun(date.getHours()),
        dateNumFun(date.getMinutes()),
        dateNumFun(date.getSeconds())
      ]
      return `${Y}-${M}-${D} ${h}:${m}:${s}` 
    },
    // 状态过滤器
    filterApprovalStatus: function(value) {
      const label = that.statusArr.labelByValue[value]
      if (typeof label !== 'string') {
        return ''
      }
      return label
    }

  },
  methods: {
    //tag标签获取类型
    formatTagType(state) {
      if (state === 0) return 'info'
      else if (state === 1 || state === 3) return 'success'
      else if (state === 2 || state === 4) return 'danger'
      else return 'success'
    },

    async  getNeedDicts() {
      const _this = this
      // 拿到状态字典
      dictGetValueByLabel('status').then(function(result) {
        _this.statusArr.valueByLabel = result
      })
      dictGetLabelByValue('status').then(function(result) {
        _this.statusArr.labelByValue = result
      })
    }

  }
}

3、表格表头样式和斑马纹样式设置
在表头添加如下代码

 <el-table
      v-loading="loading"
      id="drag-table"
      ref="table"
      :data="data"
      :height="height"
      :header-cell-style="tableHeaderColor"
      :row-class-name="tableRowClassName"
      resizable
      border
      style="width: 100%"
      @row-click="clickRow"
      @row-dblclick="edit"
      @selection-change = "selectData">

js代码如下

  // 斑马纹表格样式
    tableRowClassName({ row, rowIndex }) {
      let color = ''
      if (rowIndex % 2 === 0) {
      //class名    设置相应样式
          color = 'success-row'
       } else {
        color = 'warning-row'
      }
     if (row.isShow) {
        color = 'table-row'
      }
      //选择行样式
      for (let i = 0; i < this.multipleSelection.length; i++) {
        if (row === this.multipleSelection[i]) {
          color = 'select-row'
        }
      }
      return color
    },
    // 更改表头样式
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #373F52;color: white;font-weight: 700;'
      }
    },