element-ui
element-ui
季布,
每一个你不满意的现在,都有一个你没有努力的曾经。
展开
-
Element-Plus搭建CMS页面结构 引入第三方图标库iconfont(详细)
element plus组件库是由饿了么前端团队专门针对vue框架开发的组件库,专门用于电脑端网页的。因为里面集成了很多组件,所以使用他可以非常快速的帮我们实现网站的开发。因为图标需要在整个项目的任意地方使用,可以在public/index.html 中加载。注意:class=“iconfont” 是固定写法 后面跟那边复制的代码。如果elementui中的图标没有你想要的可以使用其它第三方的。引入的时候也是分成两种,一种是全部引入,一种是按需引入。在需要使用的地方引入。原创 2023-07-13 18:17:18 · 1809 阅读 · 0 评论 -
vue elementui 构建项目快速上手
1.步骤安装vue-cli,配置vue命令环境cnpm install vue-cli -g 全局安装vue --version 查看版本vue list 查看可以使用的模板2. 初始化项目 生成项目模板 模板名 项目名vue init webpack-simple vue-cli-demo3.进入生成的项目目录,安装模块名cd vue-cli-democnpm install // 安装依赖4. 运行项目npm run dev //启动测试服务原创 2022-02-16 13:29:43 · 445 阅读 · 0 评论 -
elementui 多选框el-checkbox-group 成多行或者多列显示
elementui 组件原始代码<template> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <div style="margin: 15px 0;"></div> <el-checkbox-group v-model="checkedCit原创 2021-11-03 12:08:28 · 7444 阅读 · 0 评论 -
element date-picker 实现每个月1号到当前日期默认时间设置(默认设置当前时间)
<el-row > <el-col :span="6" style="margin-left:200px"> Start Time:<el-date-picker v-model="requestinfo.starttime" type="date" value-format="yyyy-MM-dd" placeholder=原创 2021-09-16 18:38:50 · 915 阅读 · 2 评论 -
elementui 表格中字段数据实现跳转
<template slot-scope="scope"> <a :href="'http://xxxxxx/gerrit/#/c/'+scope.row.GerritID+'/'" target="_blank" class="buttonText">{{scope.row.GerritID}}</a> </template>参数数明:scope.ro原创 2021-09-15 14:57:20 · 860 阅读 · 0 评论 -
elementui input输入框实现模糊查询(中间踩了两个坑)
实现这个功能,在网上找了很多感觉都不太准确,残缺不全,这里做个总结完整代码 <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"> </el-autocomplete><script>export default {原创 2021-09-08 14:20:09 · 3966 阅读 · 2 评论 -
elementui 根据id复制url,通过url可直接访问目标地址
需求背景:箭头所指的是复制当前ID的url,拿到这个url在地址栏输入可以直接访问到这个弹窗,如果说我发现这弹窗里面存在某个问题,不需要其他人再打开网页找到这个ID点再击弹出弹窗,直接复制这个url转发给其他人,其他人可直接点击访问复制url在地址栏输入弹框<template slot-scope="scope"> <span> <el-button type="text" @click="allInfo(scop原创 2021-09-02 17:10:01 · 1289 阅读 · 3 评论 -
二级联动用法
需求:一级选中type后二级assignee会默认选中对应的值,而且二级的assignee下拉框还有有很多其他选项(负责的人),也就是说type选中后它的二级不仅可以选中默认的值,也可以再选其他的选项。第一级选中会确定二级选项,而二级选中不会影响一级<el-form :model='ticketform' :inline='true' :rules="rules" ref="newTicket" label-position="right"> <el-form-ite原创 2021-09-01 13:39:57 · 218 阅读 · 0 评论 -
elementui + vue 对话框关闭时表单重置
<!-- 测试弹框--> <el-dialog :title="dialogTitle" :visible.sync="dialogVisible1" width='50%' :close-on-click-modal="false" @close="closeDialogFormm()"> <el-tabs type="card" v-model="activeName"&...原创 2021-08-13 19:14:45 · 688 阅读 · 0 评论 -
elementui 对话框和网页输入框之间的距离调整
问题:目前使用elementui实现页面弹窗的功能,但是由于弹窗中要显示的内容过多,导致内容不能在一页展示,需要上下滑动才行解决思路:修改elementUI中el-dialog上部到页面顶部的距离<template> <el-dialog :title="dialogTitle" :visible.sync="dialogVisible1" width="60%" :close-on-click-modal="false" v-alterELDialogMarginTop="{m原创 2021-08-06 11:32:56 · 3157 阅读 · 0 评论 -
vue + elementui 实现select下拉框全选功能
elementui实现下拉框多选功能<el-form-item label='Type:'> <el-select collapse-tags v-model="value" placeholder="Nothing Selected" :multiple=true @change='changeSelect' @remove-tag='removeTag'> <el-option label='全选' va原创 2021-08-05 15:53:55 · 2086 阅读 · 0 评论 -
elementui + vue 弹窗实现 el-table 当前行记录的详细数据展示
页面展示的表格数据,点击ID会弹出当前记录的信息(如果页面数据信息很多,看着会很不直观,可以做一个弹窗把需要的数据都展示在弹窗里面)// 这是表格获取的ID<af-table-column prop="id" label="ID" align="center" > <template slot-scope="scope"> //scope.row 会获取原创 2021-08-03 15:04:50 · 4527 阅读 · 0 评论 -
django + vue + elementui datepicker 以时间为条件过滤数据的前后端接口
页面使用的是elementui中datepicker组件<el-form-item label='Start Time:'> <el-date-picker v-model="starttime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker> </el-form-item>原创 2021-07-30 15:01:28 · 579 阅读 · 0 评论 -
记录表格数据列筛选展示,以及el-table剧烈抖动的问题
前言:页面表格在展示数据的时候如果列数很多那么看起来就会很不方便,而且每个用户可能关注的相关列信息都不一样,会造成用户体验差<el-popover placement="right" title="列筛选" trigger="click" width="420"> <el-checkbox-group v-model="checkedColumns" size="mini"> <el-checkbox原创 2021-07-22 13:22:25 · 470 阅读 · 0 评论 -
简单实现 element-ui table列宽自调整
记录一下表格列宽的自动调整第一步先安装npm install af-table-column第二步在项目的main.js中引入import Vue from 'vue'import ElementUI from 'element-ui'import AFTableColumn from 'af-table-column'Vue.use(AFTableColumn) //要先引用vue再引入elementui第三步在表格中使用<el-table stripe :dat原创 2021-07-20 11:02:56 · 2019 阅读 · 0 评论 -
Vue + element-ui 实现分页功能完整流程
element-ui是前端使用较频繁的组件网站,我也比较喜欢使用element-ui开发前端页面,下面使用该组件实现前端分页的功能.elementui官网使用箭头所指的完整功能举个栗子<div class="block"> <span class="demonstration">完整功能</span> <el-pagination @size-change="handleSizeChange" //每页展示数据条数的调整 .原创 2021-07-19 18:47:52 · 13839 阅读 · 11 评论 -
element-ui 实现对话框
使用element-ui实现弹框<!-- 弹窗 --> <el-dialog title="New Ticket" :visible.sync="true" width="50%"> //:visible.sync="true":一般设置一个变量来保存,true为打开,false为关闭 <el-divider></el-divider> <el-form :inline='true'> // :inline原创 2021-07-07 17:07:19 · 2375 阅读 · 0 评论