elementui
vue elementui validate异步校验改成同步校验返回结果
异步的校验 <script> import { defineComponent, ref } from 'vue' export default defineComponent({ methods: { getFormDataStatus() { let result= ref(false) thi ......
Vue ElementUI中 table单元格使用多个Popover解决多行溢出隐藏鼠标悬浮提示问题
Popover的简单介绍 trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。 对于触发 Popover 的元素，有两种写法：使用 slot=“reference” 的具名插槽，或使用自定义指令v-popover指向 Popov ......
局部添加加载中效果loading （vue+elementUI）
产品需求：有时候我们不想为整个页面添加loading效果。只想给局部区域添加loading效果。（这效果就不揍产品了） 在一个表格数据加载时，因为需要连接其它东西，所以后台接口返回数据需要较长时间，因此添加局部Loading效果，增加用户体验度， 最开始使用下面代码，直接放到<el-table>中， ......
（elementUI）el-cascader级联多选，高宽样式的处理（一行显示）
一、问题：当级联选择器设置多选属性时，输入框的高度会被撑开，如下图所示 二、解决办法1.给el-cascader设置multiple和collapse-tags属性(多选模式下折叠Tag)，如下 <el-cascader :options="options" :props="{multiple: t ......
elementUI 多层结构动态生成el-form及校验
如题，当整个el-form 都是通过多层数据结构循环渲染出来的表单， 那么每个el-form-item的prop和el-input、el-select等的v-model也是动态变量填充， 怎么样才能内嵌rules校验呢？ 如下数据结构： // form通过initData数据结构进行渲染 const ......
el-scrollbar elementui 滚动条
参考：https://www.jb51.net/article/245065.htm el-scrollbar 滚动条，文档中没有 <el-scrollbar style="height: 100%"> <!-- 滚动条要包裹的内容 --> <div class="container"> 占位</d ......
微信小程序实现类似elementUI的Timeline时间线效果，自适应页面与文本
<view class="box"> <view wx:for="{{list}}" wx:key="index" class="one"> <view class="onedot"></view> <view wx:if="{{index!=list.length-1}}" class="onel ......
elementUi+table实现表格数据滚动
elementUi+table实现表格数据滚动 引用vue和elementUI CDN // 引用elementUI CDN <script src="https://unpkg.com/vue@2/dist/vue.js"></script> <!-- import JavaScript --> ......
elementui-admin中的动态菜单卡死白屏问题
页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了（之前以为，将动态添加的路由存储在了sessionStorage中，就不会vuex刷新数据丢失的影响，师父解惑：在通过vuex中的state属性存储路由在sessionStorage中，只是存储了左 ......
elementUI表格默认多选
this.multipleSelection = row.mer_type_id this.$nextTick(()=>{ this.multipleSelection.forEach(id => { const row = this.categoryMerTypeList.find(item => ......
Vue2和ElementUI编写的无限级菜单路由
Vue2和ElementUI编写的无限级菜单路由 文章转载自：www.javaman.cn <template> <div> <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :collapse="isColla ......
ElementUI: Uncaught (in promise) cancel 报错
场景：使用 element confirm 组件时，点击【取消】按钮，提示错误 Uncaught (in promise) cancel 代码如下： open() { this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定 ......
elementui 多图上传限制数量隐藏加号
参考：https://blog.csdn.net/qq_41555695/article/details/93491140 完整的elementui多图上传组件 <template> <el-upload :action="MixinUploadAllApi" :headers="headers" ......
elementui及跨域请求错误解决方法
1. 回顾 Vue: js框架，简化Dom的操作，响应式数据编程。 Vue:对象结构 let app=new Vue({ el:"数据挂载"， data:{数据}， methods:{ 方法. } }) Vue的指令: 用在dom元素的属性上。 {{}} 差值表达式 v- ......
客服系统源码界面，访客发送评价功能界面，vue+elementui发起评价
近期在定制化聊天界面的过程中，重写了下访客聊天界面的评价弹窗功能。 现在实现的效果是下面这样的 实现代码html部分 <!--在线评价--> <div v-if="comment.dialog" class="comment"> <div class="scoreBox"> <i class="ic ......
elementui table 树形表格，为每一个元素新增一个对象
//递归方法，为数据增加一个isSelect 的属性initData(data) { data.forEach((item) => { item.isSelect = false; //默认为不选中 if (item.children && item.children.length) { this. ......
在线客服系统访客发送录音功能，在elementui中使用js-audio-recorder实现录音功能，然后上传文件发送出去
访客在聊天界面中可以发送语音，其实就是录音以后，调用上传接口，把录音文件发送给客服。 点击麦克图标以后，展示出一个elementui的dialog弹窗，里面展示四个功能按钮。 分别是，开始录音，结束录音，取消录音，发送录音。基本流程就是点开始，然后点结束，再点发送。 下面是聊天界面中的dialog弹 ......
客服系统源码聊天界面，vue elementui中v-html渲染的内容，增加大图预览功能
我在开发聊天界面的过程中，聊天内容部分是使用v-html渲染出来的，能够展示html内容 但是加载的图片是不能点击放大查看的，现在增加点击放大预览功能 首先html部分是下面这样的，也就是下面要增加一个隐藏的el-image <div v-html="row.content" @click="htm ......
elementUI Table 表格编辑数据后停留当前位置
后台管理系统在实际开发中，表格如果在一定高度出现滚动条。 这时如果对表格行数据进行编辑或者拖拽排序操作，数据刷新后滚动条会默认回到顶部，这样体验会不太好。 如果想保留在当前位置可以这样操作： 1.el-table标签添加ref属性 <el-table :data="tableData" v-load ......
elementui select下来内容过长问题解决方案
:popper-append-to-body="false" 必写 自定义显示 <div class="select-flow">{{ dict.declareConditions }}</div> 自定义css样式el-option 添加title属性 <el-select v-model="fo ......
elementui表单循环添加校验
1 <el-form 2 :model="dynamicValidateForm" 3 ref="dynamicValidateForm" 4 :inline="true" 5 > 6 <template v-for="(item, index) in dynamicValidateForm.dom ......
批量上传GPT知识库，前端elementui的upload上传组件，后端Golang的上传接口实现
为了实现批量上传GPT的知识库并且功能，那么这个上传组件就必不可少，需要能把文档上传到服务器中。 前端部分，我是采用的cdn引入的形式，引入的elmentui。该框架是有上传组件的，可以参考我的用法： action部分就是上传接口，其他三个是上传之前的处理，上传成功和失败后的回调函数 <el-upl ......
基于elementui的Tree虚线，实线绘制，以及懒加载，如图
加减号用的是阿里的矢量图标库。自行去下载 路径： https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 <template> <div class="content-box"> <div class="content-to ......
elementUI input只能输入数字、小数的几种方法
elementUI input只能输入数字、小数的几种方法 原文链接：https://blog.csdn.net/weixin_42397937/article/details/123297108 elementUI文本框input设置仅可输入数字或者小数的几种方法 一、设置type=“number ......
element-plus —— 如何对elementUI-plus进行debugger
前言 无论什么UI其实操作都一样，至于为什么debugger，那肯定是有问题而且涉及到源码了，哈哈哈； 内容 引入组件后在对应的组件里面进行debugger即可 <template> <el-select></el-select> <el-dialog v-model="dialogVisible" ......
elementui table 禁用部分多选框
// 禁用多选 checkboxT(row) { if (row.bomDetailParentId == 0) { return true; //禁用 } else { return false; //不禁用 } }, <el-table-column type="selection" width ......
基于SpringBoot+Vue+ElementUI的在线考试系统（可做毕设）
青云是一套麻雀虽小但五脏俱全的在线考试系统。
采用了目前主流的技术栈SpringBoot+Vue+ElementUI，并进行了前后端分离。
对于事务和锁都有应用，非常适合学习练手。 ......
ElementUI之el-date-picker禁选配置
日期选择器之picker-options设置 <el-date-picker v-model="dateChoose" clearable type="date" format="yyyyMMdd" value-format="yyyyMMdd" :editable="false" :picker- ......
vue elementui中使表的滚动条 滚到顶部或底部
1.设置table的ref为tableList 2.设置滚动至顶部 this.$refs.tableList.bodyWrapper.scrollTop =0; 3.设置滚动至底部 this.$refs.tableList.bodyWrapper.scrollTop =this.$refs.tabl ......