element
终是后来居上
emmm
每周五-周日进行更新~
希望对初学者们能有帮助~
展开
-
element-ui的滚动条组件el-scrollbar(官方没有)
<template> <div style="height:600px;"> <el-scrollbar style="height:100%"> <div style="width:700px;height:700px;border:solid;" > ....... blabla..... </div> </el-scrollbar> </div&g.转载 2020-08-03 21:35:58 · 570 阅读 · 2 评论 -
element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻松控制高度,于是去百度大佬们的解决办法,也试了好几个,发现改变不了样式,快准备放弃等明天问下项目组的人的时候,看到了一篇文章:https://blog.csdn.net/u012499506/article/details/81217277(Vue修改element ui table tr th高度以及背景转载 2020-08-03 11:44:39 · 10267 阅读 · 5 评论 -
关于element ui滚动条使用
element ui 自带的滚动条使用在容器的直接外层添加 (需要展现滚动条的那一级)<el-scrollbar style="height:100%"></el-scrollbar>如果注意添加样式 height:100%另外添加全局的样式body .el-scrollbar__wrap { overflow-x: hidden;}<!DOCTYPE html><html><head> <meta ch转载 2020-08-03 10:27:13 · 879 阅读 · 0 评论 -
vue如何使用rules对form表单字段进行校验
// 更新于 2019-10-15:在实际开发过程中,发现以下的写法比较累赘,因为在后面的项目中,继续优化表单验证的方法,让代码更简洁。主要的修改是验证方法的修改和调用以前验证表单字段的最大长度,description: [{ max: 200, message: ‘最大长度为200个字符’, trigger: ‘blur’ }]现在写法:description: [validateLen(200)]其中,validateLen是我封装的一个方法。使用步骤:1、在uitls文件夹中新建一个val转载 2020-07-30 15:57:21 · 3305 阅读 · 0 评论 -
vue如何使用rules对表单字段进行校验
基于element-ui1、在代码中,添加属性:rules<el-form :model="form" :rules="rules" ref="form" label-width="150px"></el-form>并且,在<el-form-item>中添加prop属性,对应rules中的规则2、新开一个文件夹(validate.js)定义验证规则3、在页面(index.vue)中引入验证规则定义的文件,并在export default中定义rule规则,转载 2020-07-30 14:46:24 · 1381 阅读 · 0 评论 -
el-autocomplete使用clearable,点击清除触发事件与重新输入值提示不显示问题
重新输入值提示不显示解决办法是设置一个ref=‘elautocomplete’,然后执行querySearch()方法的时候执行this.refs.elautocomplete.activated=true∣∣this.refs.elautocomplete.activated=true ||this.refs.elautocomplete.activated=true∣∣this.refs.elautocomplete.handleFocus()方法,解决的核心思路就是想办法把this.$refs转载 2020-07-29 10:49:03 · 3618 阅读 · 2 评论 -
elementUI el-dialog弹框居中
添加如下样式,现在这个弹框既能在视窗居中,又能在内容过多时防止弹框大小超出视窗,还能把滚动限制在body内部从而使得头和尾始终可见,再也不用滚上滚下去找各种标题和按钮了!.el-dialog{ display: flex; flex-direction: column; margin:0 !important; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); /*he转载 2020-07-28 15:01:07 · 3834 阅读 · 1 评论 -
element 设置动态表头显示
js文件/* * 动态表头配置 * @Ace* *///动态表头export const colSelect = [ { 'label':'案件名称', 'prop':'caseName', 'minWidth':150, 'align':'center' },{ 'label':'办案部门', 'prop':'name', 'align':'center', 'minWidth':120, },{ 'labe原创 2020-07-27 14:07:09 · 1066 阅读 · 0 评论 -
vue+elementUI表格关键字筛选高亮
代码:<template> <div class=""> <div class="top"> <!-- 筛选 --> <div class="screen"> <div style="width:30%">筛选:</div> <el-input type="search" v-model="转载 2020-07-23 18:15:04 · 537 阅读 · 0 评论 -
element-ui弹出组件的遮罩层在弹出层el-dialog的上面
问题:加完el-dialog后,测试发现,遮罩层在弹出层上面。解决办法:1、给el-dialog的父元素添加z-index属性,一定要比遮罩层的大z-index:2000//此为样例2、如果第一个办法还是不能解决,我们就用第二个办法。出现这个状态的原因:可以检查下我们的代码布局样式,在dialog的组件外层div我们设置了 position:absolute 属性,这个属性导致遮罩层会在最上面。解决办法:在dialog的组件内加上这段代码 :append-to-body=“true”转载 2020-07-23 18:14:20 · 5781 阅读 · 5 评论 -
el-table-column自定义标题 换行
在标题要换行的列中添加 :render-header=“renderheader” ,要换行的文字后 加符号“-”(与方法中定义的符号一致)<el-table-column prop="" :render-header="renderheader" label="最高地价-(万元/亩)" width="90" align="right"></el-table-column>renderheader方法:renderheader(h, { column, $index转载 2020-07-18 09:54:18 · 1304 阅读 · 1 评论 -
element 的上传diy进度条
<el-upload class="upload-demo" action="`xxxxxxxxxx`" :http-request="beforeAvatarUpload" :show-file-list="false" :file-list="form.files" > <el-button size="small" type="primary"&...原创 2019-12-03 11:45:27 · 586 阅读 · 0 评论 -
element-ui upload文件上传
var that = this; // 判断类型是不是图片 上传文件不只图片的话可以把判断删除 if (!/image\/\w+/.test(file.type)) { that.$message("请确保文件为图像类型"); return fals...原创 2019-05-24 14:19:43 · 747 阅读 · 0 评论 -
element-ui 照片墙--文件上传(不仅图片) 上传与删除
<el-upload :action="api+'upload'" list-type="picture-card" :on-preview="handlePictureCardPreview" //点击已上传文件的事件 :on-remove="handleR...原创 2019-05-10 11:14:54 · 6445 阅读 · 2 评论 -
element ui 的照片墙 默认显示照片
element ui的照片墙 默认显示照片照片显示的数据格式要是[{name:"",url:""}]file-list = “” 默认显示的图片原创 2019-01-22 14:25:17 · 8788 阅读 · 0 评论 -
element-ui的用户头像上传默认显示图片
初始时为img获取一个图片原创 2019-01-23 09:24:08 · 8454 阅读 · 0 评论 -
element-ui 表格 行列的合并
通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。<el-table :da...原创 2019-05-08 11:13:42 · 6036 阅读 · 1 评论 -
element-ui 照片墙 多图上传和显示
<el-upload :action="api+'upload'" list-type="picture-card" :on-preview="handlePictureCardPreview" //点击时的钩子 :on...原创 2019-06-13 11:37:53 · 7544 阅读 · 0 评论 -
element-ui 里 点击事件有时不触发
@click.native="logoutHandle"原创 2019-07-08 10:14:39 · 4222 阅读 · 0 评论 -
element ui设置表格表头高度和每一行的高度
.el-table__header tr, .el-table__header th { padding: 0; height: 40px;}.el-table__body tr, .el-table__body td { padding: 0; height: 40px;}原创 2019-07-25 09:16:56 · 12787 阅读 · 0 评论 -
使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结
代码:<el-form-item label="视频上传" prop="Video"> <!-- action必选参数, 上传的地址 --> <el-upload class="avatar-uploader el-upload--text" :action="uploadUrl" :show-file-list="false" :on-success...转载 2019-09-27 14:56:16 · 4985 阅读 · 1 评论 -
element的进度条报错CUSTOM VALIDATOR CHECK FAILED FOR PROP "PERCENTAGE"
我通过computed计算的persent,在页面渲染的时候报这个错误,搜索百度都是写的时候有空格引起的,但是我的不是,后来后来是想了想,是不是因为跟图片似的还没渲染然后就获取数据导致的错误,然后我就加了一个v-if 问题解决...转载 2019-10-08 14:29:10 · 779 阅读 · 2 评论 -
el-pagination 页码 更新问题
element 分页组件在 换页 的时候,画面数据正确,但 页码却没被激活, 即 还处于换页之前的页码。如图百度搜索,尝试了很多种方案,比如 加上current-page.sync 修饰、结合localStorage利用 created() beforeUpdate () beforeDestroy ()方法,重置current-page属性值…不知道是我没写对还是其他原因,反正 最后都没...原创 2019-04-11 12:57:20 · 3769 阅读 · 2 评论