ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-07-12 15:04:41  阅读:301  来源: 互联网

标签:对表 vue 封装 外部 ant 组件 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>

 

标签:对表,vue,封装,外部,ant,组件,table
来源: https://www.cnblogs.com/lisir-blogshare/p/16470095.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有