vue3 依赖-组件tablepage-vue3 项目公共配置封装

github求⭐

可通过github 地址和npm 地址查看全部内容

vue3 依赖-组件tablepage-vue3说明文档,列表页快速开发,使用思路及范例-汇总

vue3 依赖-组件tablepage-vue3说明文档,列表页快速开发,使用思路及范例(Ⅰ)配置项文档

vue3 依赖-组件tablepage-vue3说明文档,列表页快速开发,使用思路及范例(Ⅱ)搜索及数据获取配置项

vue3 依赖-组件tablepage-vue3说明文档,列表页快速开发,使用思路及范例(Ⅲ)列表项及分页器配置及props配置

vue3 依赖-组件tablepage-vue3说明文档,列表页快速开发,使用思路及范例(Ⅳ)其他配置项

vue3 依赖-组件tablepage-vue3 项目公共配置封装

  • 介绍
  • 组件代码
    • 声明一个公共组件
    • index调用该组件
  • 讲解

介绍

虽然tablepage-vue3 已经对搜索列表页进行了高度集成封装,但是每家公司甚至每个项目的配置是不尽相同的,而项目内的逻辑却又高度一致,此时可能每个index.vue页面都需要声明同一套静态配置项目(如paginationProps配置参数,props配置参数等)

本文章是对于tablepage-vue3 依赖如何在项目中声明公共组件进行的一个输出讲解

组件代码

声明一个公共组件

<template><div :class="{ 'p-[20px]': props.page }"><tablePageref="TablePageRef":props="tablePageProps"height="70vh"changeToSearch:paginationProps="paginationProps"v-bind="$attrs"><template v-for="name in Object.keys($slots)" :key="name" #[name]="scope"><slot :name="name" v-bind="scope" /></template></tablePage></div>
</template>
<script setup>import tablePage from 'tablepage-vue3'const props = defineProps({page: Boolean})const tablePageProps = {pageNumKey: 'pageNum',pageSizeKey: 'pageSize',dataKey: 'rows',totalKey: 'total',pageSizeInit: 20}const paginationProps = {pageSizes: [10, 20, 30, 50]}const TablePageRef = ref(null)defineExpose({TablePageRef})
</script>

index调用该组件

<template><table-page page :searchConfig="searchConfig" :tableApi="getMessageList"><template #tableTopModule><div style="margin-bottom: 10px"><el-button type="primary">导出</el-button></div></template><template #default><el-table-column type="index" label="序号" align="center" width="90" /><el-table-column prop="name" label="接收人姓名" align="center" min-width="90" show-overflow-tooltip /><el-table-column prop="phone" label="接收人电话" align="center" min-width="90" show-overflow-tooltip /></template></table-page>
</template>
<script setup>
import tablePage from '@/components/TablePage'const getMessageList = () => ({total: 5,data: new Array(5).fill({ name: '张三', phone: '13x-xxxx-xxxx' })})const searchConfig = [{label: '时间',type: 'times'},{label: '电话',key: 'phone'}]
</script>

在这里插入图片描述

讲解

声明的相关属性、插槽都已经在项目的tablepage组件内部穿透给了tablepage-vue3依赖,同时,tablePage公共组件可以声明一些项目公共属性(如paginationProps配置参数,props配置参数等)给tablepage-vue3依赖,避免了项目中重复声明同一属性

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

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

相关文章

【C++】匿名对象超详细详解(什么是匿名对象?对象可以是哪些类型呢?)

目录 一、前言 二、匿名对象的概念详解 &#x1f95d; 语法结构 &#x1f34d;概念理解 三、匿名对象的对象类型 四、匿名对象的使用 &#x1f347;简单场景的使用 &#x1f349;复杂场景的使用 五、总结 六、共勉 一、前言 在C中&#xff0c;匿名对象&#xff08;Ano…

一文解决ArcGIS生成点和管段 含案例讲解

背景 在工作中&#xff0c;我们经常遇到要将坐标数据导入 GIS&#xff0c;生成点位&#xff0c;若是地理坐标系&#xff08;经纬度&#xff09;&#xff0c;那么直接用 arcgis或者QGIS 导入数据就行了&#xff0c;可实际中总会遇到各种问题&#xff1a; 坐标数据集为大地 200…

如何使用Go语言进行基准测试(benchmark)?

文章目录 一、基准测试的基本概念二、编写基准测试函数三、运行基准测试四、优化代码性能五、注意事项总结 在Go语言中&#xff0c;基准测试&#xff08;benchmark&#xff09;是一种评估代码性能的有效方式。通过基准测试&#xff0c;我们可以测量代码执行的时间、内存使用情况…

【Linux】详解core dump文件的作用以及用法ubuntu20.04下无法形成core dump文件的解决办法

说明 从第三大点开始讲解ubuntu20.04下无法形成core dump文件的解决办法。 一、core与term的区别 在之前讲过的信号中&#xff0c;终止进程的信号的动作分为两种&#xff0c;一种是core&#xff0c;一种是term。term&#xff08;全称termination&#xff09;是直接终止进程&am…

C++ string类

目录 0.前言 1.为什么学习string类 1.1 C语言字符串的局限性 1.2 C string类的优势 2.标准库中的string类 2.1 字符串作为字符序列的类 2.2 接口与标准容器类似 2.3 基于模板的设计 2.4 编码和字符处理 3.string类的常用接口说明 3.1构造函数 3.1.1默认构造函数 3…

GPU 架构与 CUDA 关系 并行计算平台和编程模型 CUDA 线程层次结构 GPU 的算力是如何计算的 算力峰值

GPU 架构与 CUDA 关系 本文主要包含 NVIDIA GPU 硬件的基础概念、CUDA(Compute Unified Device Architecture)并行计算平台和编程模型,详细讲解 CUDA 线程层次结构,最后将讲解 GPU 的算力是如何计算的,这将有助于计算大模型的算力峰值和算力利用率。 GPU 硬件基础概念GP…

Django后台项目开发实战二

我们的需求是开发职位管理系统 三个功能&#xff1a; 管理员发布职位候选人能浏览职位用户能投递职位 第二阶段 创建应用 jobs&#xff0c;实现职位数据的建模 python manage.py startapp jobs 然后再 setting .py 注册应用&#xff0c;只需添加应用名称到最后一行 INST…

实验报告5-Spring MVC实现页面

实验报告5-SpringMVC实现页面 一、需求分析 使用Spring MVC框架&#xff0c;从视图、控制器和模型三方面实验动态页面。模拟实现用户登录&#xff0c;模拟的用户名密码以模型属性方式存放在Spring容器中&#xff0c;控制器相应用户请求并映射参数&#xff0c;页面收集用户数据或…

Vue入门到关门之Vue介绍与使用

一、vue框架介绍 1、什么是Vue&#xff1f; Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与…

【图论】图论基础

图论不同地方讲的不太一样&#xff0c;本文仅限作者的理解 定义 图一般由点集 V V V 和边集 E E E 组成。 对于 v ∈ V v\in V v∈V&#xff0c;称 v v v 为该图的一个节点。 对于 e ∈ E e\in E e∈E&#xff0c;一般用二元组 ( u , v ) (u,v) (u,v) 表示 e e e&…

短视频素材有哪些方法获得?推荐8个短视频素材免费资源

在这个视觉内容至关重要的时代&#xff0c;拥有高质量视频素材对于任何视频创作者来说都是必不可少的。视频素材不仅可以增强叙事的深度&#xff0c;还能显著提升观众的参与度。为了帮助你找到理想的视频素材&#xff0c;以下是全球范围内提供顶级视频素材的网站列表&#xff0…

基于FPGA的数字信号处理(5)--Signed的本质和作用

前言 Verilog中的signed是一个很多人用不好&#xff0c;或者说不太愿意用的一个语法。因为不熟悉它的机制&#xff0c;所以经常会导致运算结果莫名奇妙地出错。其实了解了signed以后&#xff0c;很多时候用起来还是挺方便的。 signed的使用方法主要有两种&#xff0c;其中一种…

笔记-用Python脚本启停JAR程序

用Python脚本启停JAR程序&#xff0c;需要用到python中的以下内置模块 subprocess 是 Python 的一个标准库模块&#xff0c;用于在新进程中执行子命令&#xff0c;获取子进程的输入/输出/错误以及返回码等os 是 Python 的一个标准库模块&#xff0c;它提供了与操作系统交互的功…

金融案例:统一查询方案助力数据治理与分析应用更高效、更安全

随着企业数据规模的增长和业务多元化发展&#xff0c;海量数据实时、多维地灵活查询变成业务常见诉求。同时多套数据库系统成为常态&#xff0c;这既带来了数据管理的复杂性&#xff0c;又加大了数据使用的难度&#xff0c;面对日益复杂的数据环境和严格的数据安全要求&#xf…

flexpaper 远程命令执行

flexpaper 远程命令执行 这个是有POC的&#xff0c;先简单复现一下 GET /ipg/static/appr/lib/flexpaper/php/view.php?doc1.docx"%26echoshell>shel233l.txt%23&pageexp&formatswf&callbackcallback&isSplittrue HTTP/1.1 Host: 192.168.50.22 Use…

Python 机器学习 基础 之 学习 基础环境搭建

Python 机器学习 基础 之 学习 基础环境搭建 目录 Python 机器学习 基础 之 学习 基础环境搭建 一、简单介绍 二、什么是机器学习 三、python 环境的搭建 1、Python 安装包下载 2、这里以 下载 Python 3.10.9 为例 3、安装 Python 3.10.9 4、检验 python 是否安装成功&…

Systemback Ubuntu14.04 制作自定义系统ISO镜像

工作需要&#xff0c;要基于ubuntu自定义一些编译环境并将自己配置好的ubuntu做成镜像。 硬件准备 ​ 为保证能够顺利完成系统iso镜像的制作与系统还原&#xff0c;推荐准备一个较大容量的U盘或者移动固态硬盘&#xff0c;同时确保自己的Ubuntu系统还有比较大的可用空间。 1 S…

jenkins教程

jenkins 一、简介二、下载安装三、配置jdk、maven和SSH四、部署微服务 一、简介 Jenkins是一个流行的开源自动化服务器&#xff0c;用于自动化软件开发过程中的构建、测试和部署任务。它提供了一个可扩展的插件生态系统&#xff0c;支持各种编程语言和工具。 Jenkins是一款开…

美团代付系统源码搭建ZHU16728

2024美团外卖点单代付系统源码基于php 基础开发&#xff0c;这套系统搭载了外卖系统属性&#xff0c;可添加物流信息。 1.完美对接微信支付&#xff0c;支付宝支付。 2.这套系统全新UI界面&#xff0c;完美搭建可以用作商用系统服务。 3.前端UI界面内容丰富&#xff0c;功能齐全…

有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)

前言&#xff1a;在练习CSS排版的时候&#xff0c;我们经常会遇到一些排版上的问题&#xff0c;那么我们如何去解决这些问题呢&#xff1f;本篇文章给出了一些新手在练习排版时候可能会遇到的问题的解决方案。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我…