
element-ui
礼礼。
这个作者很懒,什么都没留下…
展开
-
将两个单页面修改成通过点击按钮相互嵌套的
需要修改两个地方:1.router.js文件//添加hidden:true和parentPath:'/goods_list'这两处 {path: '/add_new_goods',component: AddNewGoods , name:'添加新商品', meta: {hidden:true,accessType: 3,parentPath:'/goods_list'}},2.GoodsList.vue文件(需要添加按钮的文件)<router-link :to="{path: '/a.原创 2021-12-09 16:49:47 · 605 阅读 · 0 评论 -
【制作侧部导航栏,并添加消息提示】
整体:提示:这里简述项目相关背景:<template> <el-aside width="auto" :class="isCollapse?'menu-collapsed':'menu-expanded'"> 顶部头像/图片 导航栏 </el-aside></template>顶部图片/头像:提示:放置两个大小不同的图片,展开侧部导航栏时切换成大图片展示,否则显示小的,绑定changeCollapse点击事件<div.原创 2021-11-30 08:47:05 · 2778 阅读 · 0 评论 -
【文本溢出隐藏】
方法:设置文本框的最小宽度,添加横向滚动条,让横向滚动条呈隐藏状态1.A-B2.图片+商品名称3.原创 2021-11-23 13:15:26 · 500 阅读 · 0 评论 -
【分页常见问题】
如何用el-cow方法固定位置例如下图,想让分页栏偏右一些,根据大小给定比例,List item如果给它8份的大小,那么倩倩就得让它右移16份(8+16=24)2、如何配置分页方法呢?F12查看数据,就可以看到数据已经可以拿到了如何从让后台的数据跟着转变由于总条数不是固定的,所以这里需要将总条数绑定给vue实例,默认给0条数据divreturnmethods点击后进行分页:传递两个参数pageNow和pageSize当前页绑定size这个值,current.原创 2021-11-22 17:33:27 · 316 阅读 · 0 评论 -
【表单验证】
表单验证视频教程原创 2021-11-19 18:36:54 · 537 阅读 · 1 评论 -
【Tab表单 删除/编辑】
删除:添加一个确认气泡框(elementUI复制修改),再次确认是否删除发现一个小问题,还没确认删除呢就已经删除了,此时需要取消删除按钮的点击事件,给“好的”按钮添加触发点击方法@onConfirm="点击事件"就解决了编辑:查看视频教程...原创 2021-11-19 18:32:25 · 282 阅读 · 0 评论 -
【在表格下方创建“添加”按钮,完成添加用户信息,点击后自动添加等功能】
视频教程在Tab表格下方建立一个添加按钮,实现在页面上添加用户信息的功能1.在elementUI中找到Click,当前使用的是第一种效果,复制2.在表单下面:创建按钮、复制代码、3.修改绑定show,让它默认为打开状态true给按钮绑定一个点击事件,点击时实现该效果的展示/关闭修改该弹框的样式(一般不给定背景色,所以只需要把它默认给定的背景色,字体颜色去除即可,宽度:100%,高度:600px,表单一般需要左对齐,所以居中也去除)在elementUI中找到合适的表单,选择性复制到代原创 2021-11-19 17:24:23 · 2013 阅读 · 0 评论 -
【创建用户表格】
视频教程复制elementUI这种效果的代码对复制过来的代码进行修改先处理数据,修改所需要的数据最终结果:第一列:编号第二列:姓名鼠标移动到姓名上后会自动弹出一个弹框,展示姓名和住址两项信息第三、四、五列:生日、性别、住址第六列:放置一个搜索框在这个搜索栏中输入关键字,达到数据过滤的效果:回到elementUI中复制这行代码同时当前列下还包含的是两个按钮(编辑/删除)下面进行从后端动态获取数据后端新建数据库,写入所需要的字段安装/引入axios原创 2021-11-19 14:36:42 · 160 阅读 · 0 评论 -
2. 主页展示轮播图
视频笔记在主页上添加轮播图从elementUI中复制就行在assets文件夹下新建一个存放图片的文件夹indexImgs,将所需的图片放入并重新命名引入这几张图片此时就需要定义一个数组imgs[]后面遍历的时候就只需要遍历这个imgs即可,(将4修改成imgs)修改图片路径的展示方式原来的修改后的...原创 2021-11-19 12:00:22 · 575 阅读 · 0 评论 -
【在表单中添加两列新字段,动态传输数据】
1.在设备状态后添加两个字段:商品数、订单数,并获取动态数据2.鼠标移动到订单数上,触发出弹框(动态显示订单时间)规定自动触发、右上方显示判断:订单数=0时不显示 <el-table-column prop="eqmtSt" label="设备状态" align="center" min-width="80"></el-table-column> <el-table-column prop="goodsCount" label="商品数" a原创 2021-11-18 16:21:29 · 179 阅读 · 0 评论 -
1. elementUI创建页面间的跳转
————————————视频笔记————————————————- 第一步:创建新项目vue- 第二步:删除多余的组件删除多余的代码,如下图所示- 第三步:创建新组件1.创建主页在router/index.js文件下注册该页面将index.vue 主页 设置为默认显示状态2.对“主页”进行构建布局在elementUI中复制需要的代码,选择性提取其中,这表示菜单子选项被选中时触发的点击事件key,keypath指代的就是上图中index=" " 的索引值1234,默认原创 2021-11-13 16:27:47 · 9017 阅读 · 2 评论 -
2021-11-11
<template slot-scope="scope"> //@click="deleteVersion(scope.row.franchiseeId)" 根据franchiseeId删除账户 //:disabled="scope.row.lastLoginTime != null"禁用当前按钮 <el-button type="text" style="margin-left: 10px;" class="router_hover" @click="deleteVers..原创 2021-11-11 09:49:33 · 217 阅读 · 0 评论 -
点击禁用按钮,切换成启用按钮,同时当前行的颜色变为浅灰色
currentStatus == 'ACTIVE'是后端传来的数据,currentStatus 包括ACTIVE和DISABLE两种状态ACTIVE是此时禁用按钮的值DISABLE是此时启用按钮的值1.禁用状态下当前行呈现浅灰色:当按钮展示的是“启用”时,说明当前时处于禁用状态,当前行应该是灰色(给整行覆盖一层浅灰色样式即可)2.给表格列表区分奇偶数,呈现不同颜色绑定事件,行数是偶数,显示白色;否则 显示绿色...原创 2021-10-28 16:53:50 · 1575 阅读 · 0 评论 -
添加用户对话框
1.创建“添加用户”按钮定义一个处理函数@click=“addUser”,默认为显示状态true2.创建对话框(标题+主体+底部按钮)3.在data处进行邮箱号码的正则验证方法4.监听对话框的关闭,关闭后自动进行清空重置表单内容5.添加新用户,传入到表格中...原创 2021-10-28 15:29:15 · 159 阅读 · 0 评论