新建常规列表页组件-List
常规列表页包括查询条件部分,与列表部分。查询条件部分包括了表单组件与查询、重置按钮;列表部分包括操作按钮与翻页列表。
1、封装表单组件。
components下新建MForm.vue文件,这个组件集成element-plus常用表单元素。复杂度还可以,直接贴代码
{{ buttons.bindObject.text }}
<el-button type="primary" @click="searchData">查询
<el-button type="primary" @click="resetData">重置
TIPS:
1> props写这么多是方便理解组件,实际要从父组件传过来。
2> element-plus官网有些form组件没有封进来,实际项目有用到的话,再封装进来即可。
2、封装翻页列表。
components下新增MPages.vue文件。
这里先写遇到的坑,想用icon,结果发现element-plus的图标并不那么方便了。想要绑定动态icon,先要引入图标,并且需要用ref去转换,然后控制台会提示你,用shallowRef会更好。
贴代码
{{item.name}}
这里简单调了一下样式,具体项目还得自己看着写样式。
props写这么多是方便理解组件,实际要从父组件传过来。
这里有一个坑,pagination默认英文,需要引入语言包,才会成为中文显示。
代码:
import zhCn from 'element-plus/es/locale/lang/zh-cn.mjs';// 这个路径elemen-plus版本不同可能存在差异,需要自己确认路径
<el-pagination ...
到这里,基础列表页面引用两个组件,按照规则传参就可以了。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效