Element-ui

css中＞＞＞、/deep/、::v-deep的作用和区别，element-ui自定义样式

文章目录一、前言1.1、`/deep/`1.2、`::v-deep`1.3、`>>>`二、区别三、总结四、最后一、前言1.1、/deep/在style经常用scoped属性实现组件的私有化时，要改变element-ui
小马甲丫·2024-01-25 17:11

vue+draggable+el-upload上传图片拖拽重排方法

vue+draggable+el-upload上传图片拖拽重排方法1.html2.jsimportdraggablefrom'vuedraggable';importImageViewerfrom'element-ui
Cheng Lucky·2024-01-25 15:53

vue中单个页面设置多个上传组件

简述：在最近的项目中，遇到单页面有多个上传图片的地方，如果每一个上传组件都写一个上传事件，在编码过程中又繁琐，后期维护也麻烦，最终在element-ui中找到了解决方法，在此记录一下。
张不大了·2024-01-25 14:27

vue打包后与本地测试样式不同问题,element-ui样式打包部署前后样式不同。

个别文件的样式中未加scope。查找到一些文件中修改了对应页面的elementUI的样式，但未加scope给加上scope，就好了。
LXXgalaxy·2024-01-25 13:46

element-ui - el-checkbox绑定失效

数据添加checked属性在el-checkbox绑定失效场景原因解决方法总结场景通过使用el-checkbox，实现如下的场景，点击某个复选框，实现勾选和取消勾选。例如：后台返回数据格式如下：[{id:1,pid:1,name:'地区'},{id:2,pid:2,name:'游戏类型'},{id:3,pid:4,name:'性别'},{id:4,pid:5,name:'设备类型'},{id:5,
nunumaymax·2024-01-25 09:47

element-ui 打包流程源码解析——babel 相关

目录1，babel-cli2，babel-core3，.babelrc3.1，presets3.2，plugins其他相关该文章是为了更好的理解：element-ui打包流程源码解析（上）第2.5节npmrunbuild
下雪天的夏风·2024-01-25 04:16

element-ui滚动条样式修改

*表单高度超出设置的长度时会出现滚动条展示；.el-table__body-wrapper{height:60rem;//设置固定高度overflow-y:auto;//超出显示滚动条}elementui的滚动条样式默认是图一：这是修改后的滚动条样式后的效果：实现代码如下：//::v-deep作用是样式穿透//设置滚动条宽度::v-deep.el-table__body-wrapper::-web
踢足球的，程序猿·2024-01-25 00:57

element-ui的el-dialog组件内容在阴影下面

在使用element-ui的el-dialog组件的时候可能会遇到一些小问题，例如弹框里的内容出现在了阴影部分的下面，如下：遇到这种情况也不要慌只需在el-dialog标签上添加上以下代码即可:append-to-body
爱吃猪蹄_·2024-01-24 23:12

系统性学习vue-vue-router

router-link的replace属性编程式路由导航路由跳转后退和前进缓存路由组件两个新的生命周期钩子函数路由守卫全局前置守卫全局后置守卫独享路由守卫组件内路由守卫history模式和hash模式element-ui
aqiu~·2024-01-24 20:41

2020-03-25

JSON.parse(localStorage.getItem('keyToken'))}})importaxiosfrom'axios'import{Message,MessageBox}from'element-ui
friendshi洛初Udo邭·2024-01-24 18:36

第九章 vue 进阶篇 Element Plus 基本使用

ElementPlus基本使用element-ui是基于vue开发的一套ui组件库，提供丰富的网页开发组件，可用快速开发网站，降低前端开发成本版本element目前有两个版本element-ui：基于vue2element-plus
运维-大白同学·2024-01-24 18:14

element-ui el-image :initial-index 动态调整不生效

vue版本2.6.11element-ui2.12.0在使用el-image时需要展示图片列表并查看，但我无论怎么尝试:initial-index="index"都不会生效，或者是我的使用方法不对。目前是使用了一个动态的集合来改变:preview-src-list=“showImageList(index)”的值,从而实现点击任意图片即打开预览，并且不影响上下查看。-->{{item.ivm}}s
宿命小人·2024-01-24 16:54

vue开发ui框架（app，后台管理系统,移动端）及插件

官网：uni-app二、vue-cli3+cordova(app混合开发)网址：https://www.jianshu.com/p/543a1da430c2三、element-ui(后台管理系统)网址：
晨曦迫晓·2024-01-24 14:09

关于Element-ui中el-table出现的表格错位问题的解决方案 // 问题介绍：表格数据整个都是后端返回的（表头 + 数据）页面(aPage.vue)里是一个完整的组件＜newPag

//问题介绍：表格数据整个都是后端返回的（表头+数据）页面(aPage.vue)里是一个完整的组件组件中有一个el-table（有v-if控制显示隐藏），初步判断是因为表头数据过长+v-if会导致这个问题概率性出现（刷新就好了，偶尔刷新又有了）1、数据更新后出现的错位问题1.1直接在数据赋值后执行doLayout方法resetLayout(){this.$nextTick(()=>{if(this
毛三仙·2024-01-24 12:13

【css element-ui】el-checkbox样式

/*黑白配色多选框*//*前面框框*/.scdj_black_check.el-checkbox__input{border:2pxsolidblack!important;margin:6px0;}/*被选中状态下前面框框*/.scdj_black_check.el-checkbox__input.is-checked.el-checkbox__input{border:2pxsolidblac
米老鼠的摩托车日记·2024-01-24 11:58

Element-UI：el-table 表头筛选

前言需求：根据表头筛选表格符合条件的数据最终实现效果：情况一：表格没有分页html部分：在列中设置filters和filter-method属性即可开启该列的筛选。filters是一个数组，filter-method是一个方法，它用于决定某些数据是否显示，会传入三个参数：value,row和column。{{scope.row.UploadStatus==1?'修改':'新增'}}js部分：fil
对，我·2024-01-24 08:54

解决el-select数据量过大导致页面卡顿

解决方案：importVuefrom"vue";Vue.directive('el-select-loadmore',{bind(el,binding){letself=this//获取element-ui
胡乱分享·2024-01-24 08:54

element-ui分页组件修改当前页current-page，分页组件显示current-page不刷新问题

1.当正常在methods方法中修改current-page后，视图上还是没改变:current-page.sync="current"增加一个.sync这样会生效2.mounted中修改current-page后，视图上还是没改变//视图不更新情况mounted(){this.currentPage=2}比如:image.png不能自动变为:image.png解决办法是添加唯一key强制组件刷新
rick_zhu·2024-01-24 07:54

封装axios对拦截器配置

importaxiosfrom'axios'import{Message}from'element-ui'importstorefrom'@/store'importrouterfrom'@/router
独爱那杯cc·2024-01-24 06:45

vue 请求拦截器响应拦截器添加Loading... 工具函数

import{Loading}from"element-ui";letloadingfunctionstartLoading(){loading=Loading.service({lock:true,text
前端方程程·2024-01-24 06:03

vue项目全局拦截axios请求并挂载loading

在vue项目中的main.js进行全局的操作.1.从elementui中引入loadingimport{Loading}from'element-ui';//项目已经全局引入element的话可以不单独引入
TVM·2024-01-24 06:32

vue axios 请求拦截和响应式拦截

在这里可以对响应统一做处理importaxiosfrom'axios'importrouterfrom'@/router'import{MessageBox,Message,Loading}from'element-ui'importstorefrom
爱怪笑的小杰杰·2024-01-24 06:31

改element 主题颜色

sass创建element-variables.scss(名字自定义)/*改变主题色变量*/$--color-primary:red;/*改变icon字体路径变量，必需*/$--font-path:'~element-ui
简小咖·2024-01-24 01:42

使用Element-UI 之乱码问题

问题描述dart-sass编译后：content属性异常页面上乱码图片正确编译的16进制码问题解决解决方法1(不考虑新版的element-ui,不需要部分新的组件)：若使用的element-ui版本中未使用
Ordinary_zz·2024-01-23 21:18

element-ui日期选择组件

el-date-picker组件的引入@change：为组件绑定选择日期确定之后的事件v-model：数据绑定，日期存在这里，例如（2019-01-02~2019-03-15），但是数据绑定仅仅是作为显示作用，真正的数据可以通过change事件来获得type：选择器的样式，daterange同时出现两个月份:start-placeholder：绑定第一个选择器的默认提示语言仅仅是没有选择的时候提示
冬天的_太阳·2024-01-23 21:16

element-ui el-table中根据按钮的多少来计算操作栏的宽度

columnWidth.jsexportdefault{data(){return{minWidth:100}},watch:{minWidth(){this.setWidth()}},methods:{setWidth(){if(this.headerData){this.$set(this.headerData[this.headerData.length-1],'width',this.mi
有蝉·2024-01-23 19:42

Element组件完整引入、按需引入、样式修改（全局、局部）、简单安装less以及npm命令证书过期等

lessscss等直接使用```::v-deep```2.只能用在原生CSS语法中:```/deep/```或者```>>>```五、拓展：npm安装less报错，提示证书过期六、拓展：Vue项目中配置Element-ui
小白_ysf·2024-01-23 14:24

vue2.0 element-ui中的el-select选择器无法显示选中的内容

我使用的是element-uiV2.2.3。代码如下，当我选择值得时候，el-select选择器无法显示选中的内容，但是能触发change方法，并且能输出选择的值。select.vue文件importaxiosfrom'axios';exportdefault{data(){return{groupItem:{},formData:{},rows:'',cols:''}},watch:{},met
前端老码农·2024-01-23 05:22

Element-ui中el-select选择器实现输入和搜索，可显示输入值的详细讲解

一、问题在使用el-select选择器中，遇到了如下问题点击下方下拉框里面的值，才能进行值得显示，但是当你输入一个匹配不上的数据时，等这个in-put失去焦点时，就会把值清空，不会值的完成绑定。如下图失去焦点后二、解决问题的办法参照官网解释强制刷新即可赋值完成
天道酬勤_smile·2024-01-23 05:50

vue element-ui中的el-select选择器无法显示选中的内容

深入响应式原理—Vue.js检测变化的注意事项由于JavaScript的限制，Vue不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。对于对象Vue无法检测property的添加或移除。由于Vue会在初始化实例时对property执行getter/setter转化，所以property必须在data对象上存在才能让Vue将它转换为响应式的。例如：varvm=ne
qq_42440919·2024-01-23 05:49

element-ui中的el-select选择器无法显示选中内容的问题

element-ui中的el-select选择器无法显示选中内容的问题解决问题的文章：解决element-ui中的el-select选择器无法显示选中内容的问题_一条代码鱼的博客-CSDN博客_select
BensonLam·2024-01-23 05:13

解决element-ui中的el-select选择器无法显示选中内容的问题

问题描述：排查方法：检查数据控制台是否报错，无报错检查change是否触发，会触发最后开始百度，查看文档官方文档有这么一段话，就是属性一定要挂载到data上，不然无法检测。最后解决：排查到我的form表单，在定义表单属性的时候，没有在data中定义该字段。总结：要更新，一定检查你的字段是否在data对象上
浮生小二·2024-01-23 05:10

vue中使用highlight.js 高亮代码块

项目环境近期在做旧项目的重构，在搭建新项目的时候使用了Vue+Typescript，在前期的准备工作时，想做一套针对于公司的ui组件库，element-ui很好，但是个人喜欢花里胡哨。
蓝海00·2024-01-23 03:28

Element-ui自定义表格头部-添加筛选条件

1.引用el-table-column属性render-header2.在表格配置中自定义该方法3.实现自定义需求//自定义某列表头为时间搜索renderDate(h,{column}){returnh('el-date-picker',{props:{value:this.selectTime,type:'date',placeholder:'请选择排班时间',valueFormat:'yyyy
F-125·2024-01-23 01:46

Vue项目整合Element-ui

Vue项目：新建Vue项目选择项都选择默认就行，最后新项目目录如下图所示：新Vue项目目录点击上图中红色框选出的"Terminal"打开终端执行“npminstalelement-ui--save”将Element-UI
9dce49ca02a4·2024-01-22 22:20

使用elementDialog 对话框嵌套问题

element-ui内嵌套dailog需要添加属性append-to-body（否则body有一层蒙层）。
七个隆咚锵·2024-01-22 18:34

解决element-ui el-menu跳转，导航不高亮或没有选中问题

场景：使用elementuiNavMenu导航菜单,跳转到子页面，导航不高亮解决方案1、使用default-active绑定计算属性2、使用vue-router的模式，启用该模式会在激活导航时以index作为path进行路由跳转image.png3、计算属性image.pngcomputed:{activeIndex(){const{name}=this.$route;switch(name){c
jia林·2024-01-22 16:33

基于SpringBoot+Vue养老院管理系统设计与实现

文末获取源码开发语言：Java使用框架：springboot前端技术：Vue、css、element-ui开发工具：IDEA/MyEclipse/Eclipse、VisualStudioCode数据库：
一季春秋·2024-01-22 10:43

【GitHub项目推荐-开源的任务管理工具】【转载】

该开源项目使用到Vue、Element-UI、ECharts等技术栈。
旅之灵夫·2024-01-22 06:34

VUE element-ui之el-tree树形控件获取最后一级节点（无子节点的节点）

步骤：模板中定义ref定义方法centerResourceArr(){constresourceArr=this.$refs.tree.getCheckedNodes().filter(item=>{return!item.childrens})this.datas=resourceArr.map(vls=>{//此处为接口需要数据格式return{resourceId:vls.id,permis
赫兹/Herzz·2024-01-22 06:54

VUE element-ui之table表格前端自动过滤（筛选），不调用数据接口筛选表格，方法

步骤：模板中定义：定义data数据：data(){return{detailrowtabledataslist:[{prop:'orderNumber',label:'订单编号',sortable:true,width:'120px',keynum:1,search:''},{prop:'selfNo',label:'自编号',width:'120px',keynum:1,search:''},{
赫兹/Herzz·2024-01-22 06:23

VUE element-ui之输入框限制只能输入数字number类型及表单校验

步骤：表单中：trim:禁止输入空格取消确定定义数据：data(){return{form:{region:''},rules:{code:[{required:true,message:'请输入行政代码',trigger:'blur'}]}}},定义方法：//行政代码失焦salaryChange(e){//失去焦点时将校验通过的值赋给input框console.log(`------------
赫兹/Herzz·2024-01-22 06:23

VUE element-ui之上传身份证照片正反面详细代码

步骤：定义上传组件：身份证正面data(){retrun{imageUrlFront:''}}定义方法：//文件发生变化时changePictureUploadIDFront(file,fileList){console.log(`------`,file)constisJPG=file.raw.type==='image/jpeg'constisPNG=file.raw.type==='imag
赫兹/Herzz·2024-01-22 06:23

element el-upload 一次上传单张/多张图片（多选）

文章目录前言一、单张图片的上传二、一次上传多张图片前言这是使用element-ui中的el-upload进行上传的，但是吧，预览是自定义的组件，所以多选会有些麻烦，因为file-list的参数，具体参考例子来讲吧一
???xixi·2024-01-22 04:58

element-ui 滚动条样式修改

elementui的滚动条样式很难看这是修改全局的滚动条样式可以添加一下代码/**修改全局的滚动条*//**滚动条的宽度*/::-webkit-scrollbar{width:8px;}//滚动条的滑块::-webkit-scrollbar-thumb{background-color:#eaecf1;border-radius:3px;}修改前的效果改后的效果修改后的样式比原来好看多了修改表格的
vue学习·2024-01-22 01:16

element-ui table 改变一行的样式 row-style 失效问题

**需求：根据后端返回的颜色值改变table表格中每行的背景颜色**代码：tableRowStyle({row,rowIndex}){console.log(row.taskColor,"-->row.taskColor");letrowBackground={};if(row.taskColor){rowBackground.background=row.taskColor;}else{rowB
蓝胖子的多啦A梦·2024-01-22 00:50

element-ui中row-class-name和row-style使用的坑

官方的row-class-name使用示例如下，这个地方有个大坑，在style样式设置为scope也就是局部作用的时候会失效，必须将其去除，然而这样在组件中修改样式就会导致全局样式的变化，显然很不合理。tableRowClassName({row,rowIndex}){if(rowIndex===1){return'warning-row';}elseif(rowIndex===3){return
plan_ b·2024-01-22 00:19

封装request.js

前端一个项目可能需要调用多个后端服务，因此，前端设置多个拦截名，封装request.js，方便调用importaxiosfrom'axios'import{MessageBox,Message}from'element-ui'importstorefrom
Eleven....·2024-01-21 18:50

element-ui样式修改

https://blog.csdn.net/weixin_43206949/article/details/84949814/deep/.class类名{写上你想要修改的属性}
理子·2024-01-21 17:34

如何修改Element-ui组件默认样式

在前端项目中会运用各种组件，有时组件的默认样式并不是你项目中所需要的，你需要更改样式，但修改样式并不成功，我这次也遇到相同问题并已解决，以下解决思路供大家参考。以下是这是引入element组件后的初始样式。image.png相关组件全部引入进来后，开始调相关样式。我需要的border-radius（圆角）效果更明显一点，渲染后发现框border-radius并不起作用。image.png经过一番查
web30·2024-01-21 09:23
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他