hkyy/admin-frame/naf/data/lite-grid.vue

<template>
  <el-table
    border
    style="width: 100%;overflow: auto;"
    :size="options.size || 'mini'"
    v-bind="options"
    :data="data"
    :highlight-current-row="currentRow"
    @selection-change="selectionChange"
    @row-dblclick="dblclick"
    @current-change="handleCurrentChange"
  >
    <el-table-column v-if="selection" type="selection" width="55"></el-table-column>
    <slot name="pre"> </slot>
    <slot>
      <el-table-column
        v-for="(item, index) in listFields"
        :key="'field' + index"
        :label="item.label"
        :prop="item.name"
        :formatter="item.formatter"
        v-bind="item.options"
        show-overflow-tooltip
      />
    </slot>
    <slot name="ext"> </slot>
    <slot name="oper">
      <el-table-column label="操作" :width="options.operWidth || '100'" v-if="!readonly">
        <template v-slot:header>
          <slot name="oper_header">
            <span>操作</span>
          </slot>
        </template>
        <template v-slot="{ row, $index }">
          <el-button
            v-for="(item, index) in operItems"
            :key="'field' + index"
            @click="handleOper(item, row, $index, $event)"
            type="text"
            :size="options.size || 'mini'"
            @focus="handleFocus($event)"
          >
            <el-tooltip v-if="item.icon" :content="item.label"><i :class="item.icon"></i></el-tooltip>
            <span v-else>{{ item.label }}</span>
          </el-button>
        </template>
      </el-table-column>
    </slot>
    <slot name="post"> </slot>
  </el-table>
</template>
<script>
import _ from 'lodash';
import { FieldMeta, Operation, Formatter, MergeFilters } from './meta-util';

export default {
  name: 'lite-grid',
  props: {
    currentRow: Boolean, // 是否显示单行高亮
    meta: { type: Array, required: true },
    readonly: Boolean /* 是否显示操作列 */,
    selection: Boolean /* 是否显示多选 */,
    options: {
      type: Object,
      default: () => ({ size: 'mini' }),
    } /* 表格扩展属性 */,
    operation: {
      default: () => [
        ['edit', '编辑', 'el-icon-edit'],
        ['delete', '删除', 'el-icon-delete', true],
      ],
    } /* 操作类型 */,
    data: Array,
  },
  methods: {
    async handleOper({ event, label, confirm }, data, index, e) {
      if (e && e.target) {
        e.target.blur();
      }
      try {
        if (confirm) {
          const msg = _.isString(confirm) ? confirm : `是否${label}此数据?`;
          await this.$confirm(msg, '请确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            closeOnClickModal: false,
            type: 'warning',
          });
        }
        this.$emit(event, data, index);
        this.$emit('oper', { event, data, index });
      } catch (err) {
        if (err == 'cancel') {
          this.$message({
            type: 'info',
            message: `已取消${label}`,
          });
        }
      }
    },
    selectionChange(selection) {
      this.$emit('selection', selection);
    },
    dblclick(row) {
      this.$emit('dblclick', row);
    },
    handleCurrentChange(val) {
      this.$emit('currentRow', val);
    },
  },
  computed: {
    listFields() {
      const res = this.meta
        .map(FieldMeta)
        .filter(p => p.slots.list)
        .sort((a, b) => a.order - b.order || a.index - b.index)
        .map(p => ({
          ...p.field,
          formatter: Formatter(p, this),
          options: MergeFilters(p, this),
        }));
      // console.log('listFields: ', res);
      return res;
    },
    operItems() {
      return Operation(this.operation);
    },
  },
};
</script>
<style lang="less" scoped>
// .el-table {
// height: 80vh;
// border: none;
// overflow: auto;
// }
.el-table::before {
  height: 0;
}
.el-button + .el-button {
  margin-left: 5px;
}
</style>