antd-design-vue Table组件全局配置(分页器...)

news2025/1/11 7:08:13

描述:该框架许多默认配置好像还不支持,一般都是挨个使用挨个配置。我的项目中也遇到了类似的情况,但是当需求发生变化时,代码所有的组件使用则都需要修改,这种方式真的很不礼貌。

《我为了一口醋包了顿饺子》

需求是将系统所有的分页条数修改成自定条数。如下,就需要挨个修改定义.......

思考再三,决定还是封装一个组件


<template>
  <!-- 将默认属性与事件传递下去-->
  <Table v-bind="$attrs" v-on="$listeners" :pagination="props.pagination">
    <!-- 插槽传递-->
    <template v-for="slotName in slotNames" #[slotName]="body">
      <!-- 勿动!!-->
      <template v-if="slots[slotName]">
        <slot :name="slotName" v-bind="body"/>
      </template>
    </template>
  </Table>
</template>

<script lang="ts">
import {defineComponent} from 'vue';
// 单独引入(否则OOM!)
import {Table} from 'ant-design-vue';

export default defineComponent({
  inheritAttrs: false,
  props: {
    pagination: {type: Object, default: false},// 不需要传递的属性
  },
  components: {
    Table
  },
  setup(props, {slots}) {
    // 获取所有插槽
    const slotNames = Object.keys(slots);
    // 自定义分页器大小(为了这口醋,包了顿饺子)
    if (props.pagination) props.pagination.pageSizeOptions = ['5', '10', '20', '50'];
    return {
      slots,
      props,
      slotNames
    }
  },
})
</script>

还没完,你代码已经引入很多的a-table的情况,就需要在main.js全局注册该组件:


import {createApp} from 'vue';
import Antd from 'ant-design-vue';
import AntTable from "@/components/AntTable.vue";

const app = createApp(App);
app.use(Antd);
app.component('a-table', AntTable);// 覆盖组件
app.mount('#app');

至此,无缝替换......[撒花],一键二连唔~

注:该框架其它组件也可以使用类似方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1030603.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MQ - 19 安全_限流方案的设计

文章目录 导图Pre概述集群中的数据加密加密算法分类消息队列限流机制思考单机限流全局限流全局限流还是单机限流?对哪些资源和维度进行限流发生限流后怎么处理消息队列全局限流设计单机限流方案全局限流方案消息队列的服务降级配置 Broker 的 CPU 或内存的使用率额度配置磁盘保…

C语言每日一题(5):求两个数二进制中不同位的个数

文章主题&#xff1a;求两个数二进制中不同位的个数&#x1f525;所属专栏&#xff1a;C语言每日一题&#x1f4d7;作者简介&#xff1a;每天不定时更新C语言的小白一枚&#xff0c;记录分享自己每天的所思所想&#x1f604;&#x1f3b6;个人主页&#xff1a;[₽]的个人主页&a…

BOA服务器移植

BOA服务器移植 1、源码下载 http://www.boa.org/ News! (last updated 23 February 2005) Latest Released Version (0.94.13) here (signature here) --- 下载地址1.1 boa简介&#xff1a; 其可执行代码只有大约60KB左右&#xff0c;Boa是一个单任务的HTTP服务器&#xff…

MyBatisPlus(五)配置表名前缀:table-prefix

说明 数据库中的表名&#xff0c;和项目中的实体类名&#xff0c;并不符合默认对应规则。所有表都有同样的前缀&#xff0c;而实体类名是和表名去掉前缀后的部分对应的。 解决方案 配置全局表名前缀&#xff0c;使实体类名对应的表名&#xff0c;自动加上一段前缀。 限制 …

JSON 串和 Java 对象的相互转换

JSON 串和 Java 对象的相互转换 以 json 格式的数据进行前后端交互 前端发送请求时&#xff0c;如果是复杂的数据就会以 json 提交给后端&#xff1b; 而后端如果需要响应一些复杂的数据时&#xff0c;也需要以 json 格式将数据响应回给浏览器 为达到以上目的就需要重点学习…

基于微信小程序的美术馆预约平台设计与实现(源码+lw+部署文档+讲解等)

前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb;…

Linux_9_网络协议和管理

目录 1网络基础1.1 网络概念1.2常见的网络物理组件1.3网络应用程序1.3.1各种网络应用1.3.2应用程序对网络的要求 1.4网络的特征1.4.1速度(带宽)1.4.2网络拓扑 1.5网络1.5.1网络准和分层1.5.2开放系统互联OSI1.5.3网络的通信过程1.5.3.1数据封装和数据解封1.5.3.2协议数据单元PD…

基于SSM的四六级报名与成绩查询系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

机器学习 day36(纯度)

熵 这些例子的纯度和熵如图所示&#xff0c;且左侧为熵函数图熵函数是判断某组数据是否纯度高的指标 熵函数公式如上图&#xff0c;底数为2仅为了使函数峰值为1&#xff0c;且设定0log(0)为0&#xff0c;但log(0)为无穷大

【Java 基础篇】Java实现文件搜索详解

文件搜索是计算机应用中的一个常见任务&#xff0c;它允许用户查找特定文件或目录&#xff0c;以便更轻松地管理文件系统中的内容。在Java中&#xff0c;您可以使用各种方法来实现文件搜索。本文将详细介绍如何使用Java编写文件搜索功能&#xff0c;以及一些相关的内容。 文件…

【数据结构】图的应用:最小生成树;最短路径;有向无环图描述表达式;拓扑排序;逆拓扑排序;关键路径

目录 1、最小生成树 1.1 概念 1.2 普利姆算法&#xff08;Prim&#xff09; 1.3 克鲁斯卡尔算法&#xff08;Kruskal&#xff09; 2、最短路径 2.1 迪杰斯特拉算法&#xff08;Dijkstra&#xff09; 2.2 弗洛伊德算法&#xff08;Floyd&#xff09; 2.3 BFS算法&…

windows主机和vmware ubuntu18.04虚拟机ping通

windows主机 网线连接电脑&#xff0c;读取当前windows的相关信息 powershell 更改IP地址指令 New-NetIPAddress -InterfaceIndex 23 -IPAddress 192.168.0.105 -PrefixLength 24 -DefaultGateway 192.168.0.1 虚拟机 虚拟机需要管理员权限打开 选择桥接方式 IPV4地址改成同…

求生之路2专用服务器搭建对抗模式,药抗模式,特殊模式Ubuntu系统另附上游戏代码以及控制台代码

求生之路2专用服务器搭建对抗模式,药抗模式,特殊模式Ubuntu系统另附上游戏代码以及控制台代码 大家好我是艾西&#xff0c;熟悉Left 4 Dead 2求生之路2这游戏的小伙伴都知道这个游戏分为以下几种模式&#xff1a; 对抗模式&#xff1a;在对抗模式下&#xff0c;玩家需要掌握一…

小白的入门二叉树(C语言实现)

前言&#xff1a; 二叉树属于数据结构的一个重要组成部分&#xff0c;很多小白可能被其复杂的外表所吓退&#xff0c;但我要告诉你的是“世上无难事&#xff0c;只怕有心人”&#xff0c;我将认真的对待这篇博客&#xff0c;我相信只要大家敢于思考&#xff0c;肯定会有所收获…

Stm32_标准库_1

代码&#xff1a; #include "stm32f10x.h" // Device headerGPIO_InitTypeDef GPIO_InitStructure;//定义变量结构体int main(void){/*使用RCC开启GPIO的时钟*/RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA, ENABLE);//开启PA端口时钟/*使用GPIO_…

折线图geom_line()参数选项

往期折线图教程 图形复现| 使用R语言绘制折线图折线图指定位置标记折线图形状更改 | 绘制动态折线图跟着NC学作图 | 使用python绘制折线图 前言 我们折线的专栏推出一段时间&#xff0c;但是由于个人的原因&#xff0c;一直未进行更新。那么今天&#xff0c;我们也参考《R语…

(循环)mysql定时器删除某表中数据例子

CREATE EVENT clear_interactive_logs ON SCHEDULE EVERY 1 DAY STARTS 2023-09-21 23:36:36 DO DELETE from t_interactive_log WHERE id not IN (SELECT * from (SELECT id from t_interactive_log ORDER BY occer_time DESC limit 20000) x ); END ———————————…

Spring Boot魔法:简化Java应用的开发与部署

文章目录 什么是Spring Boot&#xff1f;1. 自动配置&#xff08;Auto-Configuration&#xff09;2. 独立运行&#xff08;Standalone&#xff09;3. 生产就绪&#xff08;Production Ready&#xff09;4. 大量的起步依赖&#xff08;Starter Dependencies&#xff09; Spring …

QT实现qq登录

1、登录界面 头文件 #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include <QMessageBox> #include <QDebug> #include "second.h" //第二个界面头文件 #include "third.h" //注册界面头文件#include <QSq…

如何进行性能测试

文章目录 前言什么是性能测试为什么要做性能测试怎么做我们的性能测试SoloPiSoloPi的介绍和安装SoloPi的性能数据 前言 随着科学技术的迅速发展&#xff0c;信息时代离不开软件&#xff0c;软件的成功上线离不开软件测试的功劳&#xff0c;因此软件测试对于软件的重要性不言而…