Vue3-element-plus表格

一、element-plus

1.用组件属性实现跳转路由

<el-menu 
active-text-color="#ffd04b" 
background-color="#232323" 
:default-active="$route.path" //高亮
text-color="#fff"router><el-menu-item index="/article/channel"><el-icon><Management /></el-icon><span>文章分类</span></el-menu-item>

2. el-card 组件

<template><el-card class="page-container"><template #header><div class="header"><span>文章分类</span><div class="extra"><el-button type="primary">添加分类</el-button></div></div></template>...</el-card>
</template><style lang="scss" scoped>
.page-container {min-height: 100%;box-sizing: border-box;.header {display: flex;align-items: center;justify-content: space-between;}
}
</style>

考虑到多个页面复用,封装成组件

  • props 定制标题

  • 默认插槽 default 定制内容主体

  • 具名插槽 extra 定制头部右侧额外的按钮

  • <slot>

<script setup>
defineProps({title: {required: true,type: String}
})
</script><template><el-card class="page-container"><template #header><div class="header"><span>{{ title }}</span><div class="extra"><slot name="extra"></slot></div></div></template><slot></slot></el-card>
</template>

页面内使用

<template><page-container title="文章分类"><template #extra><el-button type="primary"> 添加分类 </el-button></template>主体部分</page-container>
</template>

3.el-表格(重要)

第一步先调通借口返回数据

第二步封装组件

详情看官网

<el-table :data="channelList" style="width: 100%"><el-table-column label="序号" width="100" type="index"> </el-table-column><el-table-column label="分类名称" prop="cate_name"></el-table-column><el-table-column label="分类别名" prop="cate_alias"></el-table-column><el-table-column label="操作" width="100"><template #default="{ row }"><el-button:icon="Edit"circleplaintype="primary"@click="onEditChannel(row)"></el-button><el-button:icon="Delete"circleplaintype="danger"@click="onDelChannel(row)"></el-button></template></el-table-column><template #empty><el-empty description="没有数据" /></template>
</el-table>const onEditChannel = (row) => {console.log(row)
}
const onDelChannel = (row) => {console.log(row)
}

4.封装弹层

<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)const open = async (row) => {dialogVisible.value = trueconsole.log(row)
}defineExpose({open
})
</script><template><el-dialog v-model="dialogVisible" title="添加弹层" width="30%"><div>我是内容部分</div><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary"> 确认 </el-button></span></template></el-dialog>
</template>

二、封装公共组件,下拉菜单

1.新建 article/components/ChannelSelect.vue

<template><el-select><el-option label="新闻" value="新闻"></el-option><el-option label="体育" value="体育"></el-option></el-select>
</template>

2.页面中导入渲染

import ChannelSelect from './components/ChannelSelect.vue'<el-form-item label="文章分类:"><channel-select></channel-select>
</el-form-item>

3.调用接口,动态渲染下拉分类,设计成 v-model 的使用方式

<script setup>
import { artGetChannelsService } from '@/api/article'
import { ref } from 'vue'defineProps({//子组件接收modelValue: {type: [Number, String]}
})const emit = defineEmits(['update:modelValue'])//提交父组件方法
const channelList = ref([])//定义数组动态渲染
const getChannelList = async () => {const res = await artGetChannelsService()channelList.value = res.data.data
}
getChannelList()
</script>
<template><el-select//拆解方法:modelValue="modelValue"@update:modelValue="emit('update:modelValue', $event)"><el-option//动态渲染v-for="channel in channelList":key="channel.id":label="channel.cate_name":value="channel.id"></el-option></el-select>
</template>

注意:这里一定要使用大驼峰命名,不然会报错

4.父组件定义参数绑定

const params = ref({//父组件定义数据pagenum: 1,pagesize: 5,cate_id: '',state: ''
})<channel-select v-model="params.cate_id"></channel-select>//拆分开就是子组件的updata方法

vue2和Vue3v-model区别

在Vue 2和Vue 3中,v-model的使用和行为大体上是相似的,都是用来创建表单输入和应用状态之间的双向数据绑定。不过,随着Vue 3的推出,有一些细微的差别和改进:

Vue 2 中的 v-model

  1. 基于对象属性:Vue 2 使用 v-model 实现双向绑定时,实际上是在使用 value 属性和 input 事件的一个语法糖。
  2. 组件实现:自定义组件需要定义 value 属性和 input 事件来配合 v-model 的工作。
  3. model 选项:在Vue 2的自定义组件中,可以使用 model 选项来指定一个自定义的事件,而不是默认的 input 事件。

Vue 3 中的 v-model

  1. 基于 createModel 函数:Vue 3 引入了一个新的 createModel 函数,它允许更灵活的双向绑定实现。
  2. 组件实现改进:自定义组件可以使用 modelValue 属性和 update:modelValue 事件来代替Vue 2中的 value 和 input
  3. 模板中的变化:在Vue 3的模板中,应该使用 update:modelValue 来监听更新事件,如上一个警告信息所述,这要求使用全小写并用连字符分隔的事件名。
  4. 性能优化:Vue 3中的 v-model 可以利用Vue 3的性能优化,例如通过避免不必要的渲染来提高效率。

共同点

  • 在两种版本中,v-model 都是用于创建用户输入和应用状态之间的同步。
  • 它们都允许开发者在模板中以一种简洁的方式处理表单输入和应用状态的绑定。

迁移注意事项

如果你正在从Vue 2迁移到Vue 3,需要注意以下几点:

  • 确保在Vue 3中将 v-model 的更新事件监听器更改为使用全小写的连字符命名法,如 update:modelValue
  • 自定义组件可能需要更新以使用新的 modelValue 属性和 update:modelValue 事件。
  • 利用Vue 3的组合式API(如 refreactive)来更好地管理响应式状态。

总的来说,v-model 在Vue 2和Vue 3中的核心概念保持不变,但Vue 3对其进行了一些现代化的改进和优化。


 

三、el-表格(进阶)

1.封装格式化日期工具函数

1.新建 utils/format.js 封装格式化日期函数

import { dayjs } from 'element-plus'export const formatTime = (time) => dayjs(time).format('YYYY年MM月DD日')

2.导入使用 import { formatTime } from '@/utils/format'

注意这里要用插槽,

 <el-table-column label="发表时间" prop="pub_date"><template #default="{ row }">{{ formatTime(row.pub_date) }}</template></el-table-column>

2.分页渲染 [element-plus 分页]

1.分页组件

<el-paginationv-model:current-page="params.pagenum"v-model:page-size="params.pagesize":page-sizes="[2, 3, 4, 5, 10]"layout="jumper, total, sizes, prev, pager, next"background:total="total"@size-change="onSizeChange"@current-change="onCurrentChange"style="margin-top: 20px; justify-content: flex-end"
/>
const onSizeChange = (size) => {params.value.pagenum = 1params.value.pagesize = sizegetArticleList()
}
const onCurrentChange = (page) => {params.value.pagenum = pagegetArticleList()
}

2.提供分页修改逻辑

loading效果

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

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

相关文章

【算法刷题日志】吸氧羊的StarryCoding之旅 - 贡献法计算

题目链接&#xff1a;https://www.starrycoding.com/problem/3 题目描述 吸氧羊终于注册了一个StarryCoding账号&#xff01;&#xff08;她很开心&#xff09; 但是吸氧羊忘记了它的密码&#xff0c;她想起你是计算机大师&#xff0c;于是就来请教你。 她虽然不记得密码了…

hive将时间字符串转换为timestamp的几种写法

写法一 select from_utc_timestamp(from_unixtime(unix_timestamp(2023-8-7 9:38:10 UTC08:00, yyyy-MM-dd HH:mm:ss)), UTC);写法二 select cast(unix_timestamp(2023-8-7 9:38:10 UTC08:00, yyyy-MM-dd HH:mm:ss) as timestamp);写法三 select cast(trim(split(upper(2023…

校园餐厅预约系统(请打开git自行访问)

校园餐厅预约系统详细介绍 项目地址&#xff1a;https://gitee.com/zhang—xuan/online_booking_system 服务端部分 Socket类 作用&#xff1a;创建socket连接&#xff0c;作为服务端与客户端通信的基础。 Sock_Obj类 基类&#xff1a;定义了服务端需要的基本操作和属性。 派生…

C++ | Leetcode C++题解之第70题爬楼梯

题目&#xff1a; 题解&#xff1a; class Solution { public:int climbStairs(int n) {double sqrt5 sqrt(5);double fibn pow((1 sqrt5) / 2, n 1) - pow((1 - sqrt5) / 2, n 1);return (int)round(fibn / sqrt5);} };

SPI(通信协议)

简介 SPI是一个同步的数据总线&#xff0c;也就是说它是用单独的数据线和一个单独的时钟信号来保证发送端和接收端的完美同步。 时钟是一个震荡信号&#xff0c;它告诉接收端在确切的时机对数据线上的信号进行采样。 产生时钟的一侧称为主机&#xff0c;另一侧称为从机。总是…

Oracle基础4

1 视图 1.1 视图的基本创建 查询 t_owners 和 查询 view_test_1 实际是一样的 数据源表发生变化 那么视图也会发生变化 drop view VIEW_TEST_1; select * from T_OWNERS; create view view_test_1 as ( select * from T_OWNERS ); select * from view_test_1; 1.2 对复杂sq…

VMware虚拟机中ubuntu使用记录(6)—— 如何标定单目相机的内参(张正友标定法)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、张正友相机标定法1. 工具的准备2. 标定的步骤(1) 启动相机(2) 启动标定程序(3) 标定过程的操作(5)可能的报错 3. 标定文件内容解析 前言 张正友相机标定法…

编译 x264 for iOS

文章目录 编译在 FFMpeg 启用 x264其他编译选项报错处理 环境 &#xff1a; macOS 14.3.1 x264 - 20191217-2245 编译 1、下载 x264 源码 http://download.videolan.org/pub/videolan/x264/snapshots/ 这里我下载x264-snapshot-20191217-2245.tar.bz2 &#xff08;截止2024-…

centos学习- ps命令详解-进程监控的利器

ps命令详解&#xff1a;Linux进程监控的利器 在Linux系统管理中&#xff0c;进程监控是一个至关重要的环节。ps命令是Linux系统中一个功能强大的进程查看工具&#xff0c;通过它可以获取当前系统中所有进程的快照信息&#xff0c;并深入了解各个进程的详细信息。结合其各种选项…

OpenAI下周将发布ChatGPT搜索引擎,挑战谷歌搜索!

目前&#xff0c;多方位消息证实&#xff0c;OpenAI将会在5月9日上午10点公布该消息&#xff0c;大约是北京时间周五的凌晨2点。 5月3日&#xff0c;前Mila研究员、麻省理工讲师Lior S爆料&#xff0c;根据OpenAI最新的SSL证书日志显示&#xff0c;已经创建了search.chatgpt.c…

跨域初识--如何解决跨域

04 【跨域初识】 1.同源策略 同源策略(Same-Origin Policy)最早由Netscape 公司提出&#xff0c;是浏览器的一种安全策略同源&#xff1a; 协议、域名、端口号必须完全相同跨域&#xff1a; 违背同源策略就是跨域 2.如何解决跨域 2.1 JSONP jsonp只支持get请求不支持post请…

Flutter笔记:Widgets Easier组件库(12)使用消息吐丝(Notify Toasts)

Flutter笔记 Widgets Easier组件库&#xff08;12&#xff09;使用消息吐丝&#xff08;Notify Toasts&#xff09; - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 29114848416…

Hyperledger Fabric:构建企业级区块链网络的利器

一、引言 在数字化浪潮中&#xff0c;区块链技术如同一颗璀璨的明珠&#xff0c;以其去中心化、数据不可篡改的特性&#xff0c;在金融、供应链、物联网等多个领域大放异彩。而在这个领域里&#xff0c;Hyperledger Fabric以其开源、灵活、安全的特点&#xff0c;成为企业级区…

ICode国际青少年编程竞赛- Python-1级训练场-基础训练2

ICode国际青少年编程竞赛- Python-1级训练场-基础训练2 1、 a 4 # 变量a存储的数字是4 Dev.step(a) # 因为变量a的值是4&#xff0c;所以Dev.step(a)就相当于Dev.step(4)2、 a 1 # 变量a的值为1 for i in range(4):Dev.step(a)Dev.turnLeft()a a 1 # 变量a的值变为…

C语言数据结构之队列

目录 1.队列的概念及结构2.队列的实现逻辑3.队列的代码实现4.相关例题选择题 •͈ᴗ•͈ 个人主页&#xff1a;御翮 •͈ᴗ•͈ 个人专栏&#xff1a;C语言数据结构 •͈ᴗ•͈ 欢迎大家关注和订阅!!! 1.队列的概念及结构 队列&#xff1a;只允许在一端进行插入数据操作&#x…

【Flask 系统教程 2】路由的使用

Flask 是一个轻量级的 Python Web 框架&#xff0c;其简洁的设计使得构建 Web 应用变得轻而易举。其中&#xff0c;路由是 Flask 中至关重要的一部分&#xff0c;它定义了 URL 与视图函数之间的映射关系&#xff0c;决定了用户请求的处理方式。在本文中&#xff0c;我们将深入探…

C++关联容器1——map,multimap,set,multiset介绍,pair类型

目录 关联容器 使用关联容器 使用map 使用set 关联容器概述 定义关联容器 初始化multimap或multiset 关键字类型的要求 有序容器的关键字类型 使用关键字类型的比较函数 pair 类型 创建pair 对象的函数 关联容器 关联容器支持高效的关键字查找和访问。 两个主要的关…

【阿里云服务器】ubuntu 22.04.1安装docker以及部署java环境

我的服务器配置是2GB CPU 2GB 内存 Ubuntu22.04 目录 一、阿里云 ubuntu 22.04.1安装docker 二、docker基础命令 三、Windows电脑访问云服务器 四、安装java环境 安装OpenJDK 8&#xff08;可以根据需要安装其他版本的JDK&#xff09; 安装java的依赖管理工具maven 一、…

Java | Spring框架 | BeanFactory与ApplicationContext

Spring容器&#xff1a;BeanFactory与ApplicationContext Spring容器是Spring框架的核心&#xff0c;负责实例化、配置和组装Bean。 Spring容器有两种主要类型&#xff1a;BeanFactory和ApplicationContext。 一、BeanFactory 基本功能&#xff1a;BeanFactory是Spring框架…

Web Storage 笔记12 操作购物车

相关内容&#xff1a;购物车实例 WebStorage存储空间足够大&#xff0c;访问都在客户端(Client)完成。有些客户端先处理或检查数据&#xff0c;就可以直接使用WebStorage进行存储&#xff0c;不仅可以提高访问速度&#xff0c;还可以降低服务器的练习。负担。例如&#xff0c;购…