front/src/components/MxTable/index.vue

<template>
  <el-table ref="table" :border="border" :data="rows" :span-method="mergeRowsColumns"
            @selection-change="$emit('selection-change', $event)" tooltip-effect="dark">
    <template v-for="(prop, key) in propDefines">
      <template v-if="prop.hidden"></template>
      <el-table-column v-else-if="!prop.type" :key="key" :label="prop.label" :prop="key" :width="prop.width"
                       :min-width="prop.minWidth" :align="prop.align || 'center'" :fixed="prop.fixed">
        <template v-if="prop.slotHeader" #header="scopeHeader">
          <slot :name="prop.slotHeader" v-bind="{
            ...scopeHeader,
            key: key,
            label: prop.label,
            prop: prop
          }">{{ prop.label }}
          </slot>
        </template>
        <template slot-scope="scope">
          <slot v-if="prop.slot" :name="prop.slot" v-bind="{
            ...scope,
            key: key,
            label: prop.label,
            value: scope.row[key],
            prop: prop
          }">
            <span>{{ scope.row[key] }}</span>
          </slot>
          <span v-else>{{ scope.row[key] }}</span>
        </template>
        <!--    TODO: hht 22.4.11 未实现跨组件传递slot, 先支持固定级别    -->
        <template v-if="prop.children">
          <el-table-column v-for="(childProp, childKey) in prop.children" :key="childKey" :label="childProp.label"
                           :prop="childKey"
                           :width="childProp.width" :fixed="childProp.fixed"
                           :min-width="childProp.minWidth" :align="childProp.align || 'center'">
            <template v-if="childProp.slotHeader" #header="scopeHeader">
              <slot :name="childProp.slotHeader" v-bind="{
                  ...scopeHeader,
                  key: childKey,
                  label: childProp.label,
                  prop: childProp
                }">{{ childProp.label }}
              </slot>
            </template>
            <template slot-scope="scope">
              <slot v-if="childProp.slot" :name="childProp.slot" v-bind="{
                  ...scope,
                  key: childKey,
                  label: childProp.label,
                  value: scope.row[childKey],
                  prop: childProp
                }">
                <span>{{ scope.row[childKey] }}</span>
              </slot>
              <span v-else>{{ scope.row[childKey] }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table-column>
      <el-table-column :key="key" v-else :type="prop.type" :label="prop.label" :width="prop.width"
                       :align="prop.align || 'center'"></el-table-column>
    </template>
  </el-table>
</template>
<script>
import MxTableColumn from '@/components/MxTable/mx-table-column'

export default {
  components: { MxTableColumn },
  inject: {
    mergeTable: {
      default: () => {
        // do nothing.
      }
    }
  },
  props: {
    keepScroll: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    rows: {
      type: Array,
      default: () => []
    },
    propDefines: {
      type: Object,
      default: () => ({
        id: {
          label: '', // label
          slot: '', // define slot if need custom body
          slotHeader: '', // define slot if need custom header
          slotFooter: '' // define slot if need custm footer
          // defines any property that el-table-column support.
        }
      })
    }
  },
  data() {
    return {
      cacheScrollLeft: 0,
      cacheScrollTop: 0
    }
  },
  activated() {
    if (this.keepScroll && (this.cacheScrollLeft || this.cacheScrollTop)) {
      this.$nextTick(()=>{
        this.$refs.table.bodyWrapper.scrollLeft = this.cacheScrollLeft
        this.$refs.table.bodyWrapper.scrollTop = this.cacheScrollTop
      })
    }
  },
  deactivated() {
    if (this.keepScroll) {
      this.cacheScrollLeft = this.$refs.table.bodyWrapper.scrollLeft
      this.cacheScrollTop = this.$refs.table.bodyWrapper.scrollTop
    }
  },
  methods: {
    getRuntimeTable() {
      return this.$refs.table
    },
    mergeRowsColumns(scope) {
      if (typeof this['mergeTable'] === 'function') {
        return this['mergeTable'](scope)
      }
    },
    scrollToRight() {
      // use `setTimeout` instead of `$nextTick`
      // - because css style not ready in next-tick, flow maybe work well in `nextTick.nextTick`
      setTimeout(() => {
        this.$refs.table.bodyWrapper.scrollLeft = Number(this.$refs.table.bodyWidth.replace('px', ''))
      }, 500)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>