element ui
element ui组件的使用
星良辰寻
没什么好介绍的,咸鱼Id一样
展开
-
element 中的 动态类名 例如 is-active和 is-focus 样式修改
例如我点击有个is-focus的类名出现 但是不管我怎么修改is-focus的样式都不能成功,当改成:focus后就可以了,如果实在改不了样式的可以试试这个方法。**/deep/ .el-radio-button.el-radio-button–medium:focus{box-shadow: unset;}**...原创 2022-01-06 11:15:14 · 2529 阅读 · 1 评论 -
element ui -- default-checked-keys与v-show使用时候每次会重置默认勾选 解决
解决办法使用mouted设置默认勾选的代替default-checked-keys <el-tree ref="tree" :data="data" show-checkbox node-key="id" :default-expanded-keys="[1, 6, 8]" :props="defaultProps" @check-change="layer原创 2021-12-27 15:06:54 · 397 阅读 · 0 评论 -
element v-loading 文字描述 icon颜色 字体颜色
v-loading="mapInfoLoading" element-loading-text="数据加载中..." class="loading-map"icon颜色和字体颜色<style>/* 地图上的loading样式 */.loading-map .el-loading-mask { z-index: 0 !important; background-color: rgba(0, 0, 0, 0.63);}.loading-map .el-l...原创 2021-12-27 12:04:03 · 3116 阅读 · 0 评论 -
el-tree 点击更多获取数据
如果获取的列表大于设置的页数 例如第一次展示10个,但是数据有12个 则在最后增加一个更多按钮 if (res.total > this.queryGuidePageNum * 10) { let obj = { id: id, taskName: "加载更多", isLeaf: true, } res.rows.push(obj) }节点点击事件 async taskA原创 2021-08-23 16:35:19 · 690 阅读 · 0 评论 -
el-tree 懒加载树+更新(通过两个接口分别获取一级所有树及其一个下面的二级树)
重点添加:lazy :load="loadNode"template内 代码 <el-tree lazy :load="loadNode" :props="taskAreaListProps" node-key="id" :expand-on-click-node="false"> <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ n原创 2021-08-20 14:02:06 · 1468 阅读 · 0 评论 -
el-form 数字型验证
el-form 数字型验证 const checkNumber = (rule, value, callback) => { if (!value) { return callback(new Error("不能为空")); } if (!Number.isInteger(value)) { callback(new Error("请输入数值")); } else { callback();原创 2021-07-20 14:40:57 · 1450 阅读 · 1 评论 -
替换 .el-icon-arrow-down的icon
css代码:.el-icon-arrow-down:before { content: url("../images/select.png");}效果:原创 2021-07-08 16:39:14 · 1888 阅读 · 0 评论 -
el-table + el-form + input 验证
效果:核心代码:感觉略微有点复杂 应该还可以更简单 因为时间问题就不探索了 功能实现先 <el-form ref="classCscoringTableForm" :model="classCscoringTableForm" class="w-p100" label-width="125px" label-position="left"> <el-form-item label="三级指标分值:" prop="classCtableData" cl原创 2021-06-21 11:10:23 · 272 阅读 · 2 评论 -
el-form-item + tr td + 循环验证 + 双重循环验证
方法一:循环的不是el-form-item <tr v-for="(item,index) in oneScore.oneScoringList" :key="index"> <td> <el-form-item :prop="`oneScoringList.${index}.tech_guid`" :rules="[{ required: true, message: '请输入生态技术名称', trigge原创 2021-06-18 15:00:24 · 469 阅读 · 0 评论 -
el-table formmater
<el-table-column :formatter="formatter" v-for="(item,index) in vForList" align="center" :key="index" :prop="item.prop" :label="item.label"> </el-table-column> formatter(row, column, cellValue, index) { // console.log('这是row', r..原创 2021-06-17 11:10:47 · 253 阅读 · 0 评论 -
多表单验证 promise.all
原创 2021-06-04 09:00:41 · 233 阅读 · 0 评论 -
el-form-item 循环+rules+checkbox多组 验证
<el-form ref="selectCheckboxForm" :model="selectCheckboxForm" class="w-p100" label-width="120px" label-position="left"> <div class="flex1 jc-fs" v-for="(item,index) in ecologicalList" :key="index"> <el-form-item :label="i..原创 2021-05-27 18:07:57 · 2171 阅读 · 2 评论 -
el-radio失效 需要包在group里面
<el-radio-group v-model="isImportant" @change="radioChange"> <el-radio :label="true">是</el-radio> <el-radio :label="false">否</el-radio> </el-radio-group>原创 2021-05-26 17:58:57 · 192 阅读 · 0 评论 -
el-upload div slot=“file“ slot-scope=“{file}“ 上传与回显同时展示
<div slot="file" slot-scope="{file}"> <img v-if="file.file_guid_name" class="el-upload-list__item-thumbnail" :src="imgApi+file.file_guid_name" alt=""> <img v-show="file.url" class="el-upload-list__item-thumbnail..原创 2021-05-24 17:13:07 · 6493 阅读 · 1 评论 -
el-form-item + el-upload + rules 验证
上传的时候清空验证:form里面要定义template代码内原创 2021-05-24 14:36:18 · 641 阅读 · 0 评论 -
el-input type=“textarea“ 多行size设置
<el-form-item label="内容:"> <el-input type="textarea" :autosize="{ minRows: 4 }" v-model="addForm.project_content"></el-input> </el-form-item>原创 2021-05-24 13:56:00 · 3121 阅读 · 0 评论 -
vue element el-table 组件化插槽不同的按钮 (作用域插槽+具名插槽)
原创 2021-05-22 18:38:20 · 976 阅读 · 0 评论 -
el-form 表单的循环+v-if
表单的循环 <el-form label-width="180px" :model="handleAddForm1" class="handleForm" v-if="six_Target"> <template v-for="(value,key,index) in handleForm1"> <el-form-item :label="value+':'" :key="index" :prop="key">原创 2021-04-26 17:18:13 · 596 阅读 · 0 评论 -
el-table-column 循环加 v-if解决办法
在最外面加上template标签来写循环 el-table-column上写v-if <template v-for="(value,key,index) in tableData[0].attributes"> <el-table-column v-if="key!='OBJECTID'&&key!='pro_id'&&key!='org_id'" :label="changeColumn(key)" :key="index" al转载 2021-03-23 17:31:22 · 4632 阅读 · 4 评论 -
el-table 数据更新后视图不更新解决
this.itemKey = Math.random();转载 2021-03-23 11:22:36 · 1434 阅读 · 2 评论 -
el-dialog 嵌套出现遮罩层bug解决办法
效果解决办法:在父与子dialog都添加上这个属性:append-to-body="true"原创 2021-02-25 16:48:08 · 1744 阅读 · 0 评论 -
el-form 重置 失效原因 (resetFields)
this.$refs["form"].resetFields();注意如下!!!!!!!!!!!!!!!!!!!!!所以加上这个prop就可以了原创 2021-01-19 16:38:14 · 617 阅读 · 0 评论 -
el-form 表单置空+el-date-picker bug
建议大家多用重置:即this.$refs[“form”].resetFields(); this.$refs["form"].resetFields(); // this.form = {};我的一个bug表单内有一个时间选择器代码:因为存在form里面,但是如果直接将form置空,就会导致没有form.monitoring_date,从而导致日期选择不能使用 <el-date-picker v-if="isAdd" v-model="form.monitoring_原创 2021-01-19 16:14:46 · 822 阅读 · 0 评论 -
e-upload 传除默认参数外的多余的参数
<el-upload action="#" :on-remove="handleRemove" :on-change="(file,fileList)=>handleChange(file,fileList,'syt')" multiple :file-list="fileList" :auto-upload="false"> <el-button type="primary">点击上传</el-button> ...原创 2021-01-19 09:37:58 · 361 阅读 · 0 评论 -
el-form 样式 css重写
el-form 样式:.borrowAndSpoilGround是这个vue组件的一个大class类 这样就是在这个vue文件中生效。<style>.borrowAndSpoilGround .el-form-item{ margin-bottom:5px !important; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;}原创 2021-01-13 14:13:18 · 1903 阅读 · 0 评论 -
el-table 表格头部和单元格字体样式等
<el-table :cell-style="{color: '#666', fontFamily: 'Arial',fontSize:'15px'}" :data="filteredProductData" :header-cell-style="{background:'#f0f9eb', fontFamily:'Helvetica',fontSize:'14px'}" style="width: 100%">原创 2020-12-23 15:15:40 · 1912 阅读 · 0 评论 -
el-table 分类改变单元格宽度及改变label为中文(自创勿喷)
<el-table-column :label="changeColumn(key)" v-for="(value,key,index) in tableData[0].attributes" :key="index" align="center" :width="changeWidth(key)"></el-table-column>// 改变label为中文 通过比对 找出英文相对应的中文 changeColumn(key) { // console.l原创 2020-12-23 14:36:21 · 723 阅读 · 0 评论 -
vue el-table 单元格溢出展示el-tooltip 没溢出的不展示el-tooltip
vue核心代码**data内showTitle默认为true**data() { return { showTitle:true }} <el-table-column :label="changeColumn(key)" v-for="(value,key,index) in tableData[0].attributes" :key="index" align="center" :width="changeWidth(key)"> &原创 2020-12-23 14:20:27 · 1594 阅读 · 0 评论 -
el-table 组件复用开发(组件复用,多个表格使用同一个表格组件,操作栏不同)
1.表格不用大盒子装着来限制其盒子的高度来使表格滚动,直接使用文档内table属性来限制盒子的高度以出现滚动条。如下图:效果:15vh时候65vh时候原创 2020-12-10 14:12:21 · 900 阅读 · 0 评论 -
element 全局$message使用方法(vue中使用和js中使用)
main.js 内配置import { Message } from 'element-ui'// 挂载到$message上Vue.prototype.$message = Messagevue中使用this.$message.warning("1111111111111111111")js中使用(配置加使用)import Vue from 'vue' Vue.prototype.$message({ message: res.data.message, type: 'w原创 2020-12-01 14:34:37 · 20539 阅读 · 0 评论 -
element 表格 组件化
使用效果:父组件中表格格式可根据需要填写传到表格组件,如下为父组件中的需要传给子组件的格式,给子组件用来循环出表格格式用:注意点:td有display:table-cell 比display:none的权重要高,所以使用v-show会失效,所以需要使用v-if...原创 2020-11-18 11:50:43 · 333 阅读 · 0 评论 -
vue el-table-column 循环
此处的 column 为一个单独的对象val为tableData原创 2020-10-20 16:21:02 · 8118 阅读 · 0 评论 -
el-upload 同名文件不能上传效果
// 数组去重 uniqueArr(arr) { for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i].name == arr[j].name) { this.$message.warning("不支持同名文件上传"); arr.splice(j, 1);...原创 2020-10-15 09:50:23 · 1809 阅读 · 10 评论 -
element el-tree 多余部分省略并展示title
//插槽展示title <span class="span-ellipsis" slot-scope=" { node}"> <span :title="node.label">{{node.label}}</span> </span>//多余部分省略.span-ellipsis { width: 100%; overflow: hidden; text-o.原创 2020-10-09 15:04:19 · 1358 阅读 · 0 评论 -
element el-table --vue-- 纯data数据 el-table+样式+合并 代码
element el-table --vue-- 纯data数据 el-table+样式+合并效果:// 项目成果管理(右侧表格) 2020.9.14 李瑶<template> <div class="project-table"> <!-- 进度表 --> <div class="w100 f-w600 f16 no-w p-10">项目季报和年报成果</div> <el-table :data="tab原创 2020-09-15 11:45:02 · 1822 阅读 · 0 评论 -
element el-table v-for循环对象 并且判断对象是否有值兼容ie
<div class="fileOne" v-for="(value,key,index) in scope.row.startFiles" :index="index"><a :href="value" target="_blank" :title="key">{{key}}</a></div> <div class="noInfo flex1-c" v-if="JSON.stringify(scope.row.startFiles) =='{..原创 2020-09-15 11:19:23 · 1427 阅读 · 0 评论 -
table表格合并 根据年份合并行 合并解析
[3 ,0 ,0, 2 ,0 ,1] // 获取合并的数组 getSpanArr(tableData) { for (var i = 0; i < tableData.length; i++) { if (i === 0) { // 第一行的不动 this.spanArr.push(1); this.pos = 0; } else { // 判断当前元素与上一个..原创 2020-09-14 18:01:57 · 267 阅读 · 4 评论 -
el-upload 内嵌其他组件 实现选择东西后再自定义点击上传
大概长这样( 效果是这样 点1->出现2->再3来选择文件) //大盒子 <div style="margin-right:80px;"> //第一排(提示 和 + ) <div style="font-size:20px;color:#606266;font-weight:700;margin-bottom:10px;"> 矢量图层上传 &原创 2020-08-06 10:47:24 · 1897 阅读 · 0 评论 -
el-table @row-click 传多余的参数 写法
默认为三个参数@row-click="(row,column,e)=>rowClickOne(row,column,e,item)"传第四个参数原创 2020-07-22 13:56:04 · 2702 阅读 · 1 评论 -
element el-table 表格点击行高亮(背景色和字体颜色设置)
// 表格点击高亮/deep/ .el-table__body tr.current-row > td { background-color: #6eadff !important; color: #fff;}原创 2020-07-22 11:22:10 · 4912 阅读 · 5 评论