对ant design vue 1.x 组件进行二次封装

<a-table
      ref="tableElRef"
      v-bind="getBindValues" // 通过计算属性，获取父级传入的非prop属性
      :columns="columns"
      :data-source="virtualData" // 需要对原有属性进行二次改造，则设置prop
      @expand="expand" // 改造原有事件同理
      @expandedRowsChange="expandedRowsChange"
    >
      <template
          v-for="column in columns"
          :slot="column.scopedSlots?column.scopedSlots.customRender:''"
          slot-scope="text,record,index"
        >
          <slot
            :name="column.scopedSlots?column.scopedSlots.customRender:''"
            v-bind="{text, record, index}"
          ></slot>
        </template>

        <!-- 表头插槽 -->
        <template
          v-for="column in columns"
          :slot="column.slots?column.slots.title:''"
        >
          <slot :name="column.slots?column.slots.title:''"></slot>
        </template>

    </a-table>


// 通过计算属性获取父级attrs，作为table的props
  computed: {
    getBindValues () {
      return { ...this.$attrs }
    },
  },

使用

<WeTable
      :rowKey="record=>record.code"
      :specialKey="specialKey"
      :columns="columns"
      :data-source="list"
      :pagination="false"
      :scroll="{ y: 'calc(100vh - 200px)' }"
      size="small"
      bordered
    >
      <span
        slot="action"
        slot-scope="{ record }"
        class="flex justify-evenly text-blue-500"
      >
        <a-tooltip title="新增子级">
          <a-icon
            v-if="enum_type_code === 'TREE'"
            type="plus"
            @click="add(record)"
          />
        </a-tooltip>

        <a-tooltip title="编辑">
          <a-icon
            type="edit"
            @click="edit(record)"
          />
        </a-tooltip>

        <a-popconfirm
          :title="deleteTitle(record)"
          @confirm="remove(record)"
        >
          <a-tooltip title="删除">
            <a-icon type="delete" />
          </a-tooltip>
        </a-popconfirm>
      </span>
    </WeTable>

到这里你可能会发现，antd官方文档的表格插槽里面不是slot-scope="text, record"形式吗？

这是因为他的组件是使用渲染函数封装的，并不是模板，在渲染函数中是可以实现slot-scope传多个参数的，可以参考文档渲染函数的插槽部分

this.$scopedSlots.customRender(text, record, index)

但我这里的二次封装使用的模板

另外，如果对事件没有别的处理，可以直接使用$listener实例属性绑定事件

总之，要想清晰的完成一个组件的二次封装，实例属性必须要非常清楚