hr-admin/src/components/vTable/vTable.vue

<template>
  <div class="vTableCom">
    <el-table
      ref="multipleTable"
      :data="tableList"
      header-row-class-name="tableHeader"
      header-cell-class-name="tableHeader"
      @selection-change="handleSelectionChange"
      @sort-change='sortthiscolumn'
      size="mini"
      :row-class-name="tableRowClassName"
      style="width: 100%">

      <!-- selection -->
      <el-table-column
        v-if="table.selection"
        align="center"
        :fixed="table.fixed"
        type="selection"
        width="55">
      </el-table-column>

      <!-- column -->
      <el-table-column
        align="center"
        :width="item.width"
        :prop="item.props"
        :label="item.label"
        :sortable="item.sortable?'custom':false"
        v-for="(item,index) in table.column"
        :key="index">
        <template slot-scope="scope">

          <!-- slot 自定义插槽 可以用一个变量来接受item和scope (在订单列表中有使用，可以查看使用方法)-->
          <slot v-if="item.type==='slot'" name="slot" :item="item" :scope="scope.row"></slot>

          <!-- date -->
          <span v-else-if="item.type==='date'">
            <span v-if="item.format==='YMD'">{{$utils.formatYMD(scope.row[item.props])}}</span>
            <span v-else>{{$utils.format(scope.row[item.props])}}</span>
          </span>

          <span v-else-if="item.type==='imgList'">
            <el-image
              v-for="i in scope.row[item.props]"
              :key="i.id"
              style="width: 70px; height: 70px"
              :src="$img+i.imgPath"
              :preview-src-list="scope.row[item.props].map(it => $img+it.imgPath)">
            </el-image>
          </span>

          <el-popover
            placement="left"
            v-else-if="item.type==='cover'"
            width="200"
            trigger="hover">
            <img slot="reference" class="img" :src="scope.row[item.props]" alt="">
            <img class="w-100" :src="scope.row[item.props]" alt="">
          </el-popover>

          <!-- pic -->
          <el-popover
            placement="left"
            v-else-if="item.type==='pic'"
            width="200"
            trigger="hover">
            <img slot="reference" class="img" :src="$img+scope.row[item.props]" alt="">
            <img class="w-100" :src="$img+scope.row[item.props]" alt="">
          </el-popover>

          <!-- <span v-else-if="item.state">{{item.state[scope.row[item.props]]}}</span> -->

          <!-- option -->
          <span v-else-if="item.options">{{item.options[scope.row[item.props]]}}</span>

          <span v-else-if="item.html" v-html="scope.row[item.props]"></span>

          <!-- normal -->
          <span v-else>{{scope.row[item.props]}}</span>

        </template>
      </el-table-column>

      <!-- handle -->
      <el-table-column
      label="操作"
      v-if="table.handle"
      :fixed="table.fixed && 'right'"
      :width="table.width"
      align="center">
        <template slot-scope="scope">
          <el-button-group style="display:flex;justify-content: center;">
            <el-button
              v-for="(item,index) in table.handle.filter(item => scope.row[item.props] === item.key)"
              :key="index"
              size="small"
              style="margin:0px;"
              class="btn handelBtn"
              @click="handleMethods(scope.$index, scope.row, item)">
              {{item.title}}
              <!-- v-if="scope.row[item.props]===item.key" -->
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    table: {
      type: Object,
      default: () => []
    },
    tableList: {
      type: Array,
      default: () => []
    },
    show: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: () => ''
    },
    errorList: {
      type: Array,
      default: () => []
    },
    sortType: {
      type: Boolean,
      default: false
    },
    queryData: {
      type: Function,
      default: () => {}
    },
    pickList: {
      type: Array,
      default: () => []
    },
    form: Object
  },
  data () {
    return {
      orderItem: {}
    }
  },
  mounted () {
  },
  methods: {
    handleMethods (index, item, v) {
      this.$emit(v.method, item)
    },
    handleSelectionChange (val) {
      this.id && this.$emit('selection-change', val.map(item => item[this.id]))
    },
    tableRowClassName ({ row, rowIndex }) {
      if (this.errorList.includes(rowIndex)) {
        return 'error-row'
      }
      return ''
    },
    sortthiscolumn ({ column, prop, order }) {
      this.orderItem = order
        ? {
          [prop]: order === 'ascending' ? 'ASC' : 'DESC'
        }
        : {}
      this.queryData(this.form)
    }
  }
}
</script>

<style lang="scss" scoped>
    @import './vTable.scss';
</style>

<style lang='scss'>
.el-table .error-row {
  background: rgba($color: red, $alpha: 0.3);
}
</style>