cms-web/naf/data/tables/table.vue

<template>
  <el-table size="mini" :data="datas" class="table" @selection-change="handleSelectionChange" @row-dblclick="$emit('oper', { event: 'dblclick', data: $event })" border>
    <el-table-column v-if="selection" type="selection" width="55"></el-table-column>
    <el-table-column v-for="(item, index) in meta" :key="index" :prop="item.name" :label="item.title" :width="item.width || ''" show-overflow-tooltip></el-table-column>
    <el-table-column label="操作" v-if="readonly">
      <template slot-scope="scope">
        <el-button size="mini" type="text" v-for="(item, index) in operation" :key="index" @click="oper(item, scope)">
          <i v-if="item.icons" :class="item.icons"></i>
          {{ item.title }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  components: {},
  props: {
    data: { type: Array, defalut: [] },
    meta: Array,
    operation: Array,
    selection: Boolean,
    readonly: Boolean
  },
  computed: {
    datas () {
      const formatter = this.meta.filter(p => p.formatter)
      const data = [...this.data]
      formatter.filter(i => {
        data.map(p => {
          const dict = this.$dict(i.name) || []
          // eslint-disable-next-line eqeqeq
          const item = dict.filter(z => p[i.name] == z.value)
          if (item.length > 0) {
            p[i.name] = item[0].title
          }
        })
      })
      return data
    }
  },
  data () {
    return {}
  },
  methods: {
    handleSelectionChange (val) {
      this.$emit('selection', val)
    },
    oper (item, scope) {
      const formatter = this.meta.filter(p => p.formatter)
      const data = { ...scope.row }
      formatter.filter(i => {
        for (const key in data) {
          const dict = this.$dict(key) || []
          if (dict.length > 0) {
            // eslint-disable-next-line eqeqeq
            const item = dict.filter(z => data[key] == z.title)
            if (item.length > 0) {
              data[key] = item[0].value
            }
          }
        }
      })
      this.$emit('oper', { event: item.name, data: data })
    }
  },
  mounted () {}
}
</script>

<style lang="less" scoped>
.table {
  width: 98%;
  margin: 0 auto;
  max-height: 60vh;
  overflow-y: auto;
}
</style>