Element
卡洛背心
前端攻城狮,记录工作的点点滴滴。
展开
-
Vue3后台项目实现一键全屏缩放功能
今天分享使用screenfull实现全屏功能!效果图全屏前全屏后第一步安装 screenfull$ npm install screenfull第二步封装screenfull,用户体验更好<!-- * @Author: your name * @Date: 2021-10-28 19:31:51 * @LastEditTime: 2021-10-28 19:56:25 * @LastEditors: Please set LastEditors * @Descri.原创 2021-10-28 20:04:30 · 697 阅读 · 0 评论 -
基于Element组件库再次封装翻页控件
页面中使用如下: <common-pagination :currentPage="table.pageInfo.pageNo" :pageSize="table.pageInfo.pageSize" :total="table.pageInfo.totalRows" @sizeChange="handlerSizeChange" @currentChange="handlerCurrentChange" ></common-pag原创 2021-03-21 22:32:59 · 122 阅读 · 0 评论 -
Element分页器Pagination,查询后自动回第一页
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" :hide-on-single-page="true" layout="total, sizes, prev, pager, next, jump.原创 2021-03-05 11:12:51 · 3965 阅读 · 6 评论 -
Vue.js使用ElementUI实现自定义表单
效果如下:预览效果如图:废话少说,直接上代码:<template> <div> <div> <el-card class="box-card" style=" width: 80%; margin-left: 10%; min-height: 150px; margin-top: 10px; "原创 2020-12-18 10:47:47 · 1652 阅读 · 2 评论 -
前端通过Vue自己实现输入框模糊筛选数据,并将筛选结果展示
业务场景是后端返回数据,前端通过input输入框进行模糊筛选,并将筛选结果展示在下面例如接口返回的数据为:[{id:1, name:“课程1”}{id:2, name:“课程2”}{id:3, name:“续报”}]input输入框输入: 续报结果显示为: 续报input输入框输入: 课程结果显示为: 课程1 和 课程2<el-input placeholder="请输入内容" v-model="input" @blu原创 2020-10-21 14:20:40 · 2223 阅读 · 2 评论 -
Element-ui 对话框el-dialog点击关闭事件处理
默认关闭的处理使用:visible.sync="dialogVisible"进行处理<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @c原创 2020-10-10 13:08:29 · 23078 阅读 · 0 评论 -
Element的input输入框实现输入框搜索功能
饿了么框架的输入框实现搜索框功能第一种情况:失去焦点的时候触发事件: <el-input placeholder="请输入内容" v-model="input4" @blur="validateCounts"> </el-input>查找 methods: { validateCounts () { console.log('查找') } },第二种情况:每输入一个元素都会调用该方法 <el-input pla原创 2020-09-23 15:11:09 · 8131 阅读 · 2 评论 -
Element的输入框限制输入内容,建议收藏备用
输入框只能输入数字:<el-input onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" v-model="form.num2"></el-input>只能输入数字和英文逗号<input type="text" onkeyup="this.value=this.value.replace(/[^\d\,]/g,'')">1.文本框只能输入数字代码(小数点也不能输入)<input onkeyu原创 2020-08-28 16:50:45 · 3634 阅读 · 4 评论 -
Element开发页面没有数据时,展示占位图片
页面没有数据,展示占位图: .el-table__empty-text { display: block; width: 500px; height: 500px; background:url('../../../assets/placeholder.jpg') no-repeat; color: #909399; box-sizing: border-box; }原创 2020-08-28 16:45:16 · 1511 阅读 · 0 评论 -
vue+elementui实现el-table中显示图片
1、table中显示图片2、当需要遍历图片时,不能直接使用prop绑定值3、一张图片<el-table-column label="头像"> <template slot-scope="scope"> <img :src="scope.row.img" width="40" height="40" class="head_pic"/> </template></el-table-column>4、多张图片<el-原创 2020-08-28 16:43:21 · 10977 阅读 · 6 评论 -
VUE的Element组件上传文件el-upload
在业务场景中,我们经常会接到上传文件的需求,Element的上传组件就做的很完善,今天就用这个组件库来介绍:上传组件一般的有几点要求:文件格式、大小、数量等。<el-upload action="''" multiple :http-request="imgUpload" list-type="picture-card" :ref="$upload" accept=".jpg, .jpeg, .png原创 2020-08-26 17:38:03 · 18064 阅读 · 2 评论 -
vue的MessageBox的拓展使用
正常的情况的展示:<template> <el-button type="text" @click="open">点击打开 Message Box</el-button></template><script> export default { methods: { open() { this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { con原创 2020-08-26 17:31:39 · 1322 阅读 · 3 评论 -
vue实现li列表的新增删除和修改
哈喽,我又来更新啦,依旧还是业务场景的实现通过新增、删除、修改按钮实现li列表的改变新增:点击新增按钮,进行新增编辑:点击列表某一项,然后点击编辑按钮进行修改删除:点击列表某一项,然后点击删除按钮进行删除代码如下 <div class="con-icon"> <i class="el-icon-circle-plus-outline" @click="addClick"></i> <i class原创 2020-08-25 11:47:22 · 3409 阅读 · 0 评论 -
通过复选框控制折叠面板的打开与关闭
饿了么框架大家使用的都比较多,今天介绍一个关于折叠面板的业务场景:默认的折叠面板单击就可打开,业务要求通过复选框控制折叠面板的打开如图是默认的折叠面板展示:下面这张图是修改为依靠复选框打开折叠面板的效果:代码如下: <el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item name="1">// name='1' 就是当前折叠面板对应的值原创 2020-08-25 11:38:21 · 1888 阅读 · 0 评论 -
将字符串内容所对应的对象属性数据取出,再转为字符串展示
将字符串内容所对应的对象属性数据取出,再转为字符串展示以下是业务场景:接口数据:subject_ids:‘1,2,3’筛选项:subjects: [ 0: {id: “1”, name: “语文”}1: {id: “2”, name: “数学”}2: {id: “3”, name: “英语”}3: {id: “4”, name: “物理”}]目标数据:‘’语文,数学,英语‘’内容展示:内容展示:<el-form-item label="学科:">{{baseInfo.sub原创 2020-08-25 11:31:07 · 456 阅读 · 0 评论