基于Ant Design of Vue中table组件二次封装（Vue项目+antd）

一、代码简洁，HTML一行代码（如下）,具体属性看后面

 <t-ant-layout-table
        title="样品列表"  // 列表title（在表格左侧）
        isCustomScroll // 开启自定义横向滚动条
        columnSetting // 显示设置（隐藏/显示列）
        name="columnSetting" // 隐藏/显示列唯一性
        :pagination="pageOpt" // 分页器
        @paginationChange="handleTableChange" // 获取当前选择页
        @showSizeChange="showSizeChange" // 每页显示总条数时触发
        :columns="columns"  // 表头
        :dataSource="sourceData" // 数据源
        :tableOpt="{rowSelection: {selectedRowKeys: selectedRowKeys, onChange: onSelectChange}}" <!--添加Antd table属性 -->
      >
        <!-- 表格外操作————在表格右侧 -->
        <template #btn>
          <a-button type="primary" icon="plus" @click="creat">新增</a-button>
          <a-button type="primary" @click="anew" :disabled="selectedRowKeys.length === 0 ">重新处理</a-button>
          <a-button type="primary" @click="toVoids" :disabled="selectedRowKeys.length === 0 ">作废</a-button>
        </template>
      </t-ant-layout-table>

二、组件集成了以下功能

1、常规表格
2、内置分页器————配置pagination属性
3、自定义渲染列数据————配置columns下的customRender
4、内置表格内外操作按钮（表格外使用插槽btn,表格内配置columns下的customRender）
5、表格复选框——+配置tableOpt属性rowSelection: {selectedRowKeys: selectedRowKeys, onChange: onSelectChange}
6、内置调整表格列宽————配置tableOpt属性bordered:true
7、某列自定义插槽显示————配置columns属性scopedSlots: { customRender: '自定义插槽名' }
8、动态显示隐藏拖动排序列（表头）————配置column-setting/name属性（确保唯一值）
9、自定义横向滚动条始终在可视区域下面————配置isCustomScroll属性
10、固定列之类的都可在tableOpt属性中配置（即集成了antd的属性）

三、参数配置

配置参数（Attributes）

参数	说明	类型	默认值
title	左上侧标题	string,slot	无
btn	右上侧按钮组插槽	slot	无
columns	table 列描述，详细见下方配置说明。	array	无
dataSource	table 数据源	array	无
tableOpt	antd table 配置	{}	无
pagination	分页器配置{current: number, pageSize: number, total: number,paginationOpt:{antd pagination 配置}}	object	无
table	报表内容插槽，当使用该插槽时，默认 table 将不渲染	slot	无
isCustomScroll	是否开启自定义横向滚动条	Boolean	false
columnSetting	是否显示设置（隐藏/显示列）	Boolean	false
name	组件唯一标记，类似 Key 值，用于缓存表头数据	String	无

columns 配置参数（columns Attributes）

参数	说明	类型	默认值
title	列头显示文字	string	无
dataIndex	列数据在数据项中对应的 key	string	无
width	列宽度	number	无
scopedSlots	某列插槽显示	{customRender：‘自定义插槽’}	当前 dataIndex 值
customRender	自定义渲染	{comps: comp[]}	无

comp 配置参数（customRender Attributes）

参数	说明	类型	默认值
isShow	组件渲染条件，返回 true 渲染，反之不渲染	(scope) => {return true}	无
comp	组件名称，可直接指定 element 或其他全局注册的组件如：‘el-input’，也可引入非全局组件后直接指向如：Button	string ,component	无
text	渲染时组件设置组件文本	string	无
bind	渲染时组件会调用 v-text 指定设置该配置更新元素的属性	object	无
event	设置组件监听的事件，渲染时组件会调用 v-event 指定设置该配置更新元素的事件	(scope) => ({[propName: eventName]: () => {}})	无
slot	指定插入的插槽	string	无
child	支持子组件配置，参数与上方一致	array	无

pagination 配置参数（pagination Attributes）

参数	说明	类型	默认值
current	分页器当前页	number	1
total	数据量总数，用于计算分页器总页数	number	0
pageSize	每一页的数据量	number	10
paginationOpt	antd pagination 属性配置	object	无

事件（events）

事件名	说明	回调参数
paginationChange	分页器页码发生变化时触发	Function(current: number)
showSizeChange	分页器选择每页显示总条数时触发	Function(current: number,pageSize:number)

四、最终效果图

最后

gitHub组件地址

gitee码云组件地址

相关文章

---

基于ElementUi再次封装基础组件文档

---