elementui
翻译语言选择自定义封装（elementUI）
基于elementUI下拉菜单项el-dropdown自定义封装 <template> <div> <el-dropdown trigger="click" @command="handleCommand"> <el-input v-model="form.key1" suffix-icon="el ......
vue项目创建和启动、ElementUI的安装和快速学习
5.创建Vue项目 方式一：命令行（不推荐） 方式二：图形化 先找到项目想要创建的位置，去到该目录下，输入cmd回车 输入 vue ui回车 可能会遇到的问题：Failed to get response from /vue-cli-version-marker 解决办法： 找到 .vuerc文件， ......
elementui组件封装(el-menu)
废话不多说直接上代码： 递归菜单项： <template> <el-submenu v-if="menuData.children && menuData.children.length > 0" :index="menuData.menuId"> <template slot="title"> < ......
elementui表格复杂操作
1.elementui表格最后一行加粗显示 表格table加以下属性 :cell-style="cellStyleModify" methods方法实现： cellStyleModify({row,column,rowIndex,columnIndex}){ let fontStyle = null ......
符合ElementUI层级标准的全屏组件
众所周知，浏览器是有官方的全屏API的：Element.requestFullscreen()，它可以让一个元素立刻铺满视窗，并且置于所有元素之上。官方全屏是设定层级高于一切，那些append-to-body的弹窗，无论z-index多高，也绝对不会被显示出来。而那些非append-to-body模 ......
记录--`ElementUI` 中的奇技淫巧
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 在ElementUI的世界中，不仅有基础的组件和功能，还有一些让你眼前一亮、*得不能再*的高级技巧和窍门。本文将揭示这些技巧，让你在前端开发的舞台上独领风骚。无论你是一个勇敢的创新者还是一个喜欢调皮捣蛋的开发者，这些技巧都将让你的Elem ......
用elementUI表单验证 只对某一项单独进行验证或取消验证
用elementUI表单验证 只对某一项单独进行验证或取消验证 //验证 this.$refs.examine.validateField("barCode"); this.rules.barCode= [{ required: true, message: '请上传图片' }] //取消验证 th ......
elementUI <el-col>布局错乱
只需要在<el-row>中添加type类型flex，再设置flex-wrap:wrap即可 <el-row type="flex" style="flex-wrap: wrap"> ......
Vue-进阶：路由及elementUI组合开发
Vue-router路由 什么是vue-router？ 服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时，浏览器会从服务端获得全新的 HTML，然后重新加载整个页面。 然而，在单页面应用中，客户端的 JavaScrip ......
Vue执行和开发流程、登录小案例、混入、插件、elementui
一、Vue执行流程 1、vue的执行流程 # 1 为什么浏览器中访问某个地址，会显示某个页面组件 -根组件：App.vue 必须是 <template> <div id="app"> <router-view></router-view> </div> </template> -1 配置路由 rou ......
解析vue项目，scoped，ref属性，混入mixin，插件，Elementui
0 解析一下vue项目🐱🚀 1 为什么浏览器中访问某个地址，会显示某个页面组件 -0 根组件：App.vue 必须是 <template> <div id="app"> <router-view></router-view> </div> </template> -1 配置路由 router ......
vue + ElementUI 表格表头筛选数据过多，让筛选框显示滚动条
代码参考： .el-table-filter { max-height: 300px; overflow: auto; } 因为，表头筛选功能是引入的element ui的第三方组件，当我们的样式写了scoped进行了样式管控只适用于当前组件时，而又不想去除scoped属性造成组件之间的样式覆盖。这 ......
elementUI表格多选框toggleRowSelection无效
前言 项目中遇到一个需求：弹框中有一个带分页的多选表格，在用户切换分页时，需要记录用户当前选择，在切换回上页时，显示用户已勾选项 使用elementUI 表格多选框的toggleRowSelection发现并没有效果。 一开始以为是切换分页后没有等待页面加载完成后就调用了该函数所以无效； 解决1：添 ......
实现类似elementui中的树节点过滤效果
filterTree(tree, arr=[]){ let that = this if (!tree.length) return []; for (let item of tree) { let node = {} if(item.name.indexOf(this.searchVal) > - ......
elementui tree 获取选中子节点的所有父级节点信息
```javascript // 获取选中的节点 const checkedNodes = this.$refs.rolePermissionsTree.getCheckedNodes(false, true) // 获取选中节点的所有父级节点 checkedNodes.forEach(node = ......
ElementUI-DateTimePicker时间限制
####需求 有两个时间控件，开始时间不能大于结束时间 ``` ``` js ``` pickerOptionsStart: { disabledDate: (time) => { if (this.queryParams.endDate) { return ( time.getTime() > n ......
elementui el-select设置默认值且默认值不允许删除
参考网址：【记录】el-select 已选项禁止删除 el-select编辑时已选择的项不允许删除 、element-ui里面的下拉多选框 el－select 时，默认值不可删除 在项目中 el-select 设置默认值且默认值不允许删除和取消选中 通过vue全局指令实现该要求 export def ......
elementui 长表单验证滚动到首个错误位置
this.$refs['form'].validate(valid => { if(valid){ // 验证通过 } else { // 验证失败 this.$nextTick(() => { let isError = document.getElementsByClassName('is-er ......
ElementUI 全局设置组件的默认属性
import ElementUI from 'element-ui' Element.Input.props.clearable.default = true; JS 复制 全屏 原生属性 通常情况下，以maxlength属性为例 import ElementUI from 'element-ui' ......
Vue【原创】基于elementui的分组多选下拉框【group-list】
效果图： 如图分为多选模式和单选模式。 group-select： 1 <template> 2 <div> 3 <el-select 4 v-model="innerValue" 5 :placeholder="placeholder" 6 @change="changeSelect" 7 :cl ......
elementUI使用el-uplaod上传多个图片并删除部分图片
前端界面： <el-form-item label="商品轮播图" :rules="[{ required: true, message: '必须要上传图片', trigger: 'blur' }]" prop="images"> <el-upload ref="upload" :action=we ......
elementUI——el-input阻止输入后回车清除输入值，且提交表单
参考： 1.键盘回车事件导致页面刷新的问题vue+element https://blog.csdn.net/weixin_47560716/article/details/128820592?utm_medium=distribute.pc_relevant.none-task-blog-2~de ......
VUE- elementUI使用quill富文本编辑器(编辑文本、上传图片)
准备工作：安装 yarn install vue-quill-editor main.js // 编辑器 import VueQuillEditor from 'vue-quill-editor' // 引入样式 import 'quill/dist/quill.core.css' import ' ......
elementUI使用echarts的空气质量地图统计
准备工作： 前端安装：yarn install echarts 、 yarn install vue-baidu-map --save 前端在public文件夹下的index.html中 head标签中加入： <script src="https://api.map.baidu.com/api?v= ......
ElementUI图标icon乱码问题
#如题：ELementUI图标icon乱码问题 > 原因：在build编译时编译器处理导致的 ## 解决方案 - 方案一：将saas更换为node-saas，安装不了问题可查看[这里](https://www.cnblogs.com/cp-cookie/p/17598394.html "这里") - ......
ElementUI中使用＜el-row＞自适应布局导致显示错乱
错乱代码（部分）： <el-row :gutter="5"> <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in caseList" :key="index"> <img :src="baseUrl + item.bus ......
ElementUI 后台管理模板中使用自定义指令截取字符串长度加省略号
在使用vue3 + ElementPlus开发中，尤其在开发cms项目时，新闻标题需要控制字符串长度。重复写截取字符串样式非常麻烦。 在最近开发 Vue + ElementPlus 后台管理框架时，装成一个自定义指令。方便使用。 废话不多说，直接上代码。 1、在项目根目录新建一个文件夹： dir ......
elementUI使用分页器以及搜索条件
<template> <div> <!-- 搜索--> <div style="float: left"> <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini"> <el-form-item ......
ElementUI——vue2+element-ui 2.x的动态表格和表单
# 前言 一个基于vue2.x + element-ui 2.x版本的项目，里面都是CURD的东西，但是前人并未封装组件，而是直接CV，现在要新增一个大模块的功能，就想着封装个组件，后面再基于这个组件对老项目进行改造； > 虽然是一个大模块，但是功能还是比较简单的，结构如下； ![](https:/ ......