[JavaScript知识库]对ant design vue 1.x 组件进行二次封装

<a-table
      ref="tableElRef"
      v-bind="getBindValues" // 通过计算属性，获取父级传入的非prop属性
      :columns="columns"
      :data-source="virtualData" // 需要对原有属性进行二次改造，则设置prop
      @expand="expand" // 改造原有事件同理
      @expandedRowsChange="expandedRowsChange"
    >
      <!-- vue3版本适用 -->

      <!-- <template
        #[item]="data"
        v-for="item in Object.keys($slots)"
      >
        <slot
          :name="item"
          v-bind="data || {}"
        ></slot>
      </template> -->

      <template
        v-for="(i, name) in $scopedSlots"  // 通过该实例属性获取父级的插槽对象
        v-slot:[name]="text, record, index" // 动态插槽名 与 slot-scope属性
      >
        <slot
          :name="name"
          v-bind="{text, record, index}" // 绑定作用域
        ></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)

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

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