封装a-table需要对表传入相关操作(增、删、改、查)

1.封装ant-table.vue组件
<a-table>
//插槽进行相关操作外部插入  
<template #action="{ text,record }" slot="action">
        <slot :scope="record" name="operation"></slot>
      </template>
</a-table>

2.在外部组件引入使用

//导入组件
import AntTable from "./ant-table.vue"
//使用
<AntTable>
<template v-slot:operation="scopeData">
        <a-button
            type="text"
            @click="operation({ type: 'EDIT', data: scopeData.scope })"
          >
            <FormOutlined
              title="编辑"
              class="operation-span"
            />
          </a-button>
          <a-button
            @click="operation({ type: 'DELETE', data: scopeData.scope })"
            type="text"
          >
            <DeleteOutlined
              title="删除"
              class="operation-span" />
          </a-button>
      </template>
</AntTable>

 

posted @ 2022-07-12 14:56  奔跑的哈密瓜  阅读(737)  评论(0编辑  收藏  举报