front/src/components/dynamic-table/index.vue

<template>
  <el-table ref="table" :data="rows" v-bind="mergedAttrs" v-on="$listeners">
    <dynamic-table-column v-for="column in visibleColumns" :key="column.prop" :column="column"
                          :default-setting="columnDefaultSetting">
      <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
        <slot :name="slot" v-bind="scope">
          {{ scope.display }}
        </slot>
      </template>
    </dynamic-table-column>
  </el-table>
</template>

<script>
/*
* NOTE：22.5.9 hht
* 新的动态表格，支持多级嵌套与动态属性/事件
* */
import DynamicTableColumn from '@/components/dynamic-table/dynamic-table-column'

export default {
  name: 'dynamic-table',
  components: { DynamicTableColumn },
  props: {
    rows: { type: Array, default: () => [] },
    columns: { type: Array, default: () => [] },
    tableDefaultSetting: { type: Object, default: () => ({}) },
    columnDefaultSetting: { type: Object, default: () => ({ align: 'center' }) }
  },
  computed: {
    mergedAttrs() {
      return { ...this.tableDefaultSetting, ...this.$attrs }
    },
    visibleColumns() {
      return this.columns.filter(col => col.hidden !== true)
    },
    tableCore() {
      return this.$refs.table
    }
  }
}
</script>

<style scoped>

</style>