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,一经查实,立即删除!

相关文章

常用网络知识点(网管网工需掌握)

前言 最近在学习网络方面的内容时&#xff0c;看到很多知识点重复出现&#xff0c;不管在任何地方都能利用&#xff0c;我也就加班整理出一份针对于网络管理员/网络工程师等从业网络方面的知识点汇总 有需要的可以点赞搜藏慢慢看&#xff01;后续还会更新常见配置命令 BGP BGP…

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

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

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

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

《大数据最全面试题-Offer直通车》目录

大数据时代已经到来&#xff0c;数据科学家、大数据工程师、数据分析师等岗位成为了热门职业。如果你正准备面试&#xff0c;想要脱颖而出&#xff0c;那么《大数据最全面试题-Offer直通车》是你的不二选择。 本书汇集了多篇超过1万字的精华内容&#xff0c;包括程序员入职新公…

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

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

requestbody无法将json字符串转为相应类

报错问题&#xff1a;"requestbody无法将json字符串转为相应类" 通常意味着在使用Spring框架的REST API时&#xff0c;客户端发送的JSON数据无法被正确地解析为服务器端预期的Java对象。 可能的原因和解决方法&#xff1a; JSON格式错误&#xff1a;确保客户端发送的…

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

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

HTML_CSS学习:CSS像素与颜色

一、像素 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>像素</title> </head><style>.atguigu1{/*单位可以是cm&#xff0c;但不能是m,dm*/width: 1cm;height: 1cm;background-c…

Java语法day1

Java语法day1 一、选择题二、编程题 一、选择题 1、派生类调用基类的构造器必须用到的关键字&#xff08;C&#xff09; A: this B: final C: super D: static 说明&#xff1a;调用父类的构造器或者父类的方法&#xff0c;要用关键字super 2、以下哪个接口的定义是正确的&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…

Unity Timeline学习笔记(5) - 自定义轨道切片上变量Transform对象丢失,使用ExposedReference来解决。

问题 我在笔记(4)中后来又引用了Hierarchy中的Transform对象Transform obj&#xff0c;发现一些问题。 要么无法拖入进去对象&#xff0c;要么拖入进去保存后&#xff0c;再次编辑或者运行的时候发现obj丢失了。 我们还是用修改下笔记&#xff08;4&#xff09;的部分代码来…

linux查看端口占用

以3040端口为例 要查看在Linux系统中哪个程序占用了3040端口&#xff0c;可以使用lsof命令或netstat命令结合适当的参数。这里提供两种常用的方法&#xff1a; 方法1&#xff1a;使用 lsof 命令 lsof&#xff08;List Open Files&#xff09;是一个查看当前系统打开文件的工…

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;页面收集用户数据或…

Golang实现一个批量自动化执行树莓派指令的软件(7)辅助模块-本地活动网络

简介 为了更方便的使用&#xff0c;我们将实现一个可以扫描本地连接网络中可用连接的扫描功能&#xff0c; 扫描本地连接网络中有哪些连接的设备主机。 环境描述 运行环境: Windows&#xff0c; 基于Golang&#xff0c; 暂时没有使用什么不可跨平台接口&#xff0c; 理论上支持…

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

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

acwing算法提高之数据结构--可持久化数据结构

目录 1 介绍2 训练 1 介绍 本专题用来记录可持久化数据结构相关的题目。 本专题主要讲如下两类数据结构的可持久化&#xff1a; trie的可持久化线段树的可持久化&#xff0c;即主席树 可持久化的前提&#xff1a;本身的拓扑的结构不变。 解决什么类型的问题&#xff1a;可…

【图论】图论基础

图论不同地方讲的不太一样&#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&…

Linux 根据提交记录生成补丁及新旧文件对比

#!/bin/bash#解决/bin/bash^M: bad interpreter: Text file busy #sed -i s/\r$// test1.shCMD1$1 CMD2$2 CMD3$3 echo "CMD1 > $CMD1" echo "CMD2 > $CMD2" echo "CMD3 > $CMD3" # 运行时的入参 CMD1提交记录1 CMD2提交记录2 CMD3输出…