drp-ui/src/components/super-table/index.vue

<template>
  <el-table
    v-if="innerValue.length"
    v-bind="$attrs"
    v-on="$listeners"
    :data="innerValue"
    border
    stripe
    highlight-current-row
    class="el-super-table"
  >
    <slot></slot>
    <el-table-column
      v-for="({ item, attr }, index) in showColumns"
      :key="index"
      :prop="item.key"
      :label="item.title"
      :width="item.width || 225"
      show-overflow-tooltip
    >
      <template slot-scope="scope">
        <component
          v-if="attr.is === 'el-dict-tag'"
          v-bind="attr"
          :size="$attrs.size"
          :value="scope.row[item.key]"
          :options="dict.type[attr.dictName]"
        ></component>
        <component
          v-else-if="attr.is === 'el-file-preview'"
          v-bind="attr"
          v-model="scope.row[item.key]"
        ></component>
        <component
          v-else-if="attr.is === 'el-computed-input-v2'"
          v-bind="attr"
          v-model="scope.row[item.key]"
        ></component>
        <component v-else is="span">{{
          scope.row[item.key] || "--"
        }}</component>
      </template>
    </el-table-column>
  </el-table>
  <el-empty v-else :image-size="200"></el-empty>
</template>

<script>
export default {
  name: "SuperTable",
  props: {
    value: {
      type: [Array],
      require: true,
    },
    dict: {
      type: [Object],
      require: true,
    },
    columns: {
      type: [Array],
      require: true,
    },
  },
  components: {
    ElDictTag: () => import("@/components/DictTag/index.vue"),
    ElFilePreview: () => import("@/components/file-preview/index.vue"),
    ElComputedInputV2: () => import("@/components/computed-input-v2/index.vue"),
  },
  data() {
    return {};
  },
  computed: {
    innerValue: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
    showColumns: {
      get() {
        return this.columns.filter(({ attr }) => attr.isHidden);
      },
    },
  },
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  destroyed() {},
};
</script>
<style scoped></style>