feat: add slots support for StandardTable.vue; :star2: 新增：StandardTable.vue...

chenghongxing

2020-07-23 6c33fb0072690f2f10c9362c2a47168ee2968e73

feat: add slots support for StandardTable.vue; :star2:
新增：StandardTable.vue 组件增加 slots 支持；

 src/components/table/StandardTable.vue

@@ -20,10 +20,14 @@
      :dataSource="dataSource"
      :rowKey="rowKey"
      :pagination="pagination"
      @change="onChange"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: updateSelect}"
    >
      <template slot-scope="text, record, index" :slot="slot" v-for="slot in scopedSlots">
        <slot :name="slot" v-bind="{text, record, index}"></slot>
      </template>
      <template :slot="slot" v-for="slot in slots">
        <slot :name="slot"></slot>
      </template>
    </a-table>
  </div>
@@ -36,13 +40,14 @@
  data () {
    return {
      needTotalList: [],
      scopedSlots: []
      scopedSlots: [],
      slots: []
    }
  },
  methods: {
    updateSelect (selectedRowKeys, selectedRows) {
      this.$emit('update:selectedRows', selectedRows)
      this.$emit('change', selectedRowKeys, selectedRows)
      this.$emit('selectedRowChange', selectedRowKeys, selectedRows)
    },
    initTotalList (columns) {
      const totalList = []
@@ -54,16 +59,30 @@
      return totalList
    },
    getScopedSlots(columns) {
      return columns.filter(item => item.scopedSlots && item.scopedSlots.customRender)
        .map(item => item.scopedSlots.customRender)
      let scopedSlots = columns.filter(item => item.scopedSlots).map(item => item.scopedSlots)
      scopedSlots = scopedSlots.flatMap(item => {
        return Object.keys(item).map(key => item[key])
      })
      return scopedSlots
    },
    getSlots(columns) {
      let slots = columns.filter(item => item.slots).map(item => item.slots)
      slots = slots.flatMap(item => {
        return Object.keys(item).map(key => item[key])
      })
      return slots
    },
    onClear() {
      this.updateSelect([], [])
      this.$emit('clear')
    },
    onChange(pagination, filters, sorter, {currentDataSource}) {
      this.$emit('change', pagination, filters, sorter, {currentDataSource})
    }
  },
  created () {
    this.scopedSlots = this.getScopedSlots(this.columns)
    this.slots = this.getSlots(this.columns)
    this.needTotalList = this.initTotalList(this.columns)
  },
  watch: {

 src/pages/list/QueryList.vue

@@ -97,6 +97,8 @@
        :dataSource="dataSource"
        :selectedRows.sync="selectedRows"
        @clear="onClear"
        @change="onChange"
        @selectedRowChange="onSelectChange"
      >
        <div slot="description" slot-scope="{text}">
          {{text}}
@@ -104,6 +106,9 @@
        <div slot="action" slot-scope="{text, record, index}">
          <a-icon type="edit" />{{index}}
        </div>
        <template slot="statusTitle">
          <a-icon @click.native="onStatusTitleClick" type="info-circle" />
        </template>
      </standard-table>
    </div>
  </a-card>
@@ -129,9 +134,9 @@
    customRender: (text) => text + ' 次'
  },
  {
    title: '状态',
    dataIndex: 'status',
    needTotal: true
    needTotal: true,
    slots: {title: 'statusTitle'}
  },
  {
    title: '更新时间',
@@ -179,6 +184,15 @@
    onClear() {
      this.$message.info('您清空了勾选的所有行')
    },
    onStatusTitleClick() {
      this.$message.info('你点击了状态栏表头')
    },
    onChange() {
      this.$message.info('表格状态改变了')
    },
    onSelectChange() {
      this.$message.info('选中行改变了')
    },
    addNew () {
      this.dataSource.unshift({
        key: this.dataSource.length,