新建常规列表页组件-List

常规列表页包括查询条件部分,与列表部分。查询条件部分包括了表单组件与查询、重置按钮;列表部分包括操作按钮与翻页列表。
1、封装表单组件。
components下新建MForm.vue文件,这个组件集成element-plus常用表单元素。复杂度还可以,直接贴代码

TIPS:
1> props写这么多是方便理解组件,实际要从父组件传过来。
2> element-plus官网有些form组件没有封进来,实际项目有用到的话,再封装进来即可。

2、封装翻页列表。
components下新增MPages.vue文件。
这里先写遇到的坑,想用icon,结果发现element-plus的图标并不那么方便了。想要绑定动态icon,先要引入图标,并且需要用ref去转换,然后控制台会提示你,用shallowRef会更好。
贴代码

这里简单调了一下样式,具体项目还得自己看着写样式。
props写这么多是方便理解组件,实际要从父组件传过来。

这里有一个坑,pagination默认英文,需要引入语言包,才会成为中文显示。
代码:
import zhCn from 'element-plus/es/locale/lang/zh-cn.mjs';// 这个路径elemen-plus版本不同可能存在差异,需要自己确认路径

<el-pagination ...

到这里,基础列表页面引用两个组件,按照规则传参就可以了。

posted @   God、夜  阅读(19)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效
点击右上角即可分享
微信分享提示