##element-ui 第103页

element-ui table表格组件实现手风琴效果

一、前言百度上到的实现多多少少有点瑕疵，要么只能实现默认展开，要么不能实现，要么总会有一行是展开状态，所以自己想办法解决了这个问题。二、代码首先，核心代码三、解释expand-change事件会监听tableexpand行发生变化时触发，无论展开还是关闭，这就很烦，他会返回2个默认参数，一个是当前行，二个是当前展开的行的集合数组，所以这里我用第二个参数的长度是否大于1来识别是否有多个展开，如果是，

weixin_33845477·2020-08-22 19:38

element-ui table 点击分页table滚动到顶部

在做项目中，碰到一个问题，table加了固定头，内容可滚动，当滚到table底边时，点击分页后还在底边解决方法：设置table的ref='multipleTable'//切换分页的方法加上下面这句，table就能自动滚到顶部this.$refs.multipleTable.bodyWrapper.scrollTop=0;完美^_^转载于:https://www.cnblogs.com/Kyaya/

weixin_30781775·2020-08-22 19:09

Element-ui树形控件el-tree获取父级节点的id

Element-ui官网给的方法getCheckedKeys(){console.log(this.

weixin_30314793·2020-08-22 19:40

element-ui Collapse 折叠面板源码分析整理笔记（十）

Collapse折叠面板源码：collapse.vueexportdefault{name:'ElCollapse',componentName:'ElCollapse',props:{accordion:Boolean,//是否手风琴模式value:{//当前激活的面板(如果是手风琴模式，绑定值类型需要为string，否则为array)type:[Array,String,Number],def

weixin_30312557·2020-08-22 19:38

element-ui 折叠面板一次只展开一行

//折叠面板每次只能展开一行expandSelect(row,expandedRows){varthat=thisthis.percentage=0;this.isShVideo=false;this.isVideo=false;this.openscheme=row.scheme_id;//console.log(row);setTimeout(()=>{video=document.query

she_lei_lei·2020-08-22 18:19

前端的自我修养之vue结合element-ui 组件遇到的问题总结二之国

二、项目问答1、怎么在一行固定的输入行，输入添加到表格，并且输入添加的值不能和之前添加的重合。如图：需求：唯一条码输入框，输入一行列表回车添加一个，并清空当前输入框。疑点：首先输入一行按回车，值分几种情况，(一)、如果按回车前有值却和之前重合该如何。(二)、如果按回车前没有只要添加，只是点击输入框后，有临时改变主意不添加，这种情况如何。(三)、如果不想只用回车添加，也可以有其他方法。(四)、添加到

文可明事理·2020-08-22 18:09

前端的自我修养之vue结合element-ui 组件遇到的问题总结的

一、每日一法问题1.按钮组件背景颜色变换因为一开始样式以及确定，点击之后样式不是可以达到所想的效果，如果想按钮一开始是白底，点击之后是蓝底，代码：（1）默认按钮主要按钮（2）{{item}}如上代码所示：(1)是初始的按钮，通过type来定义type类型stringprimary/success/warning/danger/info/textprimary：基本的类型白底黑字success成功的

文可明事理·2020-08-22 18:37

element-ui的table表格的toggleRowExpansion方法展开指定行

首先：文档中的toggleRowExpansion方法，我用了没有成功。试了另一个方法，配合原文档的展开表格，主要注意两点：1.设置表格属性：2.处理数据：Briefsummary:row-key和expand-row-keys要同时使用，才会生效！

tangchangcai.·2020-08-22 18:21

vue element-ui el-form表单验证表单验证，数值输入验证踩坑

1、官网介绍表单验证使用https://element.faas.ele.me/#/zh-CN/component/form#biao-dan-yan-zheng2、所遇到的问题，当字段是数字类型的时候，输入input后，验证不通过原因是el-input默认值的类型是字符串类型输入即使是数字，也被el-input自己处理成了字符换数字。3、解决办法设置type='number'此外，注意v-mod

小涛_foxiaotao·2020-08-22 18:35

element-ui el-tree 设置回显节点半选解决方案

1、element-uiel-tree设置回显节点半选解决方案项目需求：树节点选择添加完后，再次编辑，若节点为全选，则设置为全选。若改节点下未设置全选，父节点设置为半全选实现原理：利用tree组件渲染后带有的isLeaf(是否为叶子节点)属性，如果为叶子节点就选中。这样利用tree的API就实现了正确的回显效果。并没有过多的逻辑，只是利用tree本身的API出BUG的概率也不会变高。手动设置nod

stormyk·2020-08-22 18:34

Vue 手风琴和 $set

最近，在开发项目的时候，要做一个手风琴，要求能**同时展开多个面板**，喏，也就是Element-ui折叠面板这个型的：但需求是加了更改排序的功能，如下图，表现上自然不同了，先前提到的Element-ui

唐鹏程·2020-08-22 18:13

vue.js 使用技巧总结

vue.js使用技巧覆盖element-ui样式只覆盖某个组件内的element-ui样式，而不影响全局。

大灰狼的小绵羊哥哥·2020-08-22 18:36

解决element-ui中级联选择器 el-cascader 数据列表内容高度过高超出屏幕的问题和滚动条 el-scrollbar 底下横向滚动条样式影响美观的问题

1.级联选择器el-cascader数据列表内容高度过高超出屏幕解决办法：在全局样式中加入以下代码/*解决cascader级联样式表超出屏幕的问题*/.el-cascader-panel{height:210px;}2.滚动条el-scrollbar底下横向滚动条样式影响美观解决办法：在全局样式中加入以下代码/*隐藏横向滚动条*/.el-scrollbar__wrap{overflow-x:hid

Yi_Miny·2020-08-22 18:20

element-ui树形控件el-tree自定义

对于element-UI的树形控件的使用，遇到了一个问题，前台可以一直添加子分类，形成了无限极分类，在我鼠标滑过每一级分类时，都会显示添加子分类，效果是这样的在自定义时，我做了一个中间变量去做显示隐藏，

玲珑咖啡·2020-08-22 18:48

基于element-ui的级联多选选择器:el-cascader-multi

基于element-ui的级联多选选择器，友好显示下拉箭头，样式与element一致，支持多选与级联选择器的大部分功能。

__Charming__·2020-08-22 18:32

Vue Element-ui下拉使用

记录一下element-ui的下拉框灵活用法//页面代码这个是table里面的下拉//下拉框赋值//spEvationUserScoreVO集合里面有evationRuleBVOList集合(这个集合里面的数据是下拉框所需要的

王先生cc·2020-08-22 18:01

VUE element-ui 表格筛选filter-method方法，适用于数组，嵌套对象

希望大家指正针对这种情况，第一栏是新老校区都有的情况筛选的数据是这样的，classTimePosition是表格的一个prop绑定的属性classTimePosition:[{campus:'new',timePosition:[{time:'1',weekD:'周三',position:'bw221',},{time:'2',weekD:'周一',position:'bx211',}],},{c

gfddd1231·2020-08-22 18:28

关于uni-app开发ui框架选择问题

关于uni-app开发ui框架选择问题在开发前端时，为了减少UI设计的工作量，一般大家都会使用一些比较优秀的开源ui组件，例如bootstrap、element-ui、mui、vant-ui等。

Ctwokm·2020-08-22 18:52

element-ui 级联选择器 el-cascader更改v-model值为字符串后报错

级联选择器只能通过v-model绑定数组,当v-model中的值更改为字符串时需要将v-model绑定的值进行深拷贝,这样就不会影响原来数组数据深拷贝需要安装lodash依赖然后导入import_deepfrom'lodash'使用:constform=_deep.cloneDeep(this.addForm)form.categories=form.categories.join(',')

皮皮小澜孩·2020-08-22 18:51

element-ui日期组件默认赋值

varfaiSearchObj=newVue({el:'.fai-payRecord-search',data:{form:{regDateBeg:dateFormatter(newDate(),false),//这个日期参数，这里做了修改...(其他无关参数，省略)}},methods:{onSubmit(){console.log(this.form.regDateBeg);}}});func

流绪@微梦·2020-08-22 18:04

vue 之 element-ui 实现全选和复选框

element-ui表格实现全选和多选功能，先看效果图：代码也是相对简单，根据官网提供的API来实现，具体代码奉上：选中全选exportdefault{data(){return{checkAll:false

厉害的辛巴·2020-08-22 18:58

element-ui 级联选择器菜单高度溢出问题解决方法

高度溢出由于本人学习过程中遇到element-ui级联选择器菜单高度溢出问题，如图所示：经过多种尝试发现是新旧版本问题。

程序不了猿·2020-08-22 18:20

element-ui chian-area-data 将市辖区改为城市名称

element-uichian-area-data将市辖区改为城市名称npm安装npminstallelement-china-area-data-Sgithttps://github.com/Plortinus/element-china-area-data更改文件夹省市区三级联动，https://www.npmjs.com/package/element-china-area-data(下载地

再逢明月会九州·2020-08-22 17:43

element-ui中的中国省市区级联选择器

element-ui中的中国省市区级联选择器安装导入使用效果安装以下教程参考自官方的教程：https://www.npmjs.com/package/element-china-area-data执行以下语句安装城市数据

看门猫·2020-08-22 17:38

element-ui省市区三级联动：选择即改变

element-ui省市区三级联动：选择即改变注意：阅读本文，经验传授：vue.js单组件引入外部或自定义的.js文件，并调用文件内三级联动的json数据；自定义设置默认地址，结合json数据包中的value

草巾冒小子·2020-08-22 17:27

el-table type="selection" 默认选中

在使用element-ui的el-table时，每行的复选框默认是不选中的，但是需求要求它选中O(∩_∩)O哈哈~第一步：在el-table中加ref属性，它在vue中相当于是id的存在。

让时光到此为止。·2020-08-22 17:25

vue + element-ui el-form在el-table中的表单验证

在开发过程中偶尔遇到el-table嵌套el-form，而且还需要表单验证的需求，如下图：解决方案：动态定义el-form-item的prop属性，保证唯一性，并设置独立的rules属性。html代码：{{scope.row.value6}}删除js代码：data(){return{applyForm:{applyDataList:[]},applyRules:{value3:[{required

qq_21976063·2020-08-22 17:27

记录写vue项目中遇到的坑，Element-ui级联选择器，选择任意一项，就是不能选择，结果.....

在做一个前后端分离的项目中，使用了前端ui框架Element-ui框架，发现使用了某些组件时，该写的都写了，就是没有起到作用，在百度上找了很久，都没有找到办法，有个朋友说看看文档，我看到文档上面有个版本号

努力学习编程技术的90后·2020-08-22 17:20

element-ui el-table表头自定义配置，表格拖动排序

一需求说明表格列太多，页面展示不下，希望可以对表头自定义配置，配置是否展示，宽度，顺序等等。配置绑定用户。二需求开发2.1在表头右侧添加按钮，使用caption元素，createCaption(){constcaption=document.createElement('caption');//创建元素caption.innerHTML='';//图标样式document.querySelecto

大德大威顾神·2020-08-22 17:01

element-UI级联选择器--数据回显

修改的时候进行级联选择器的数据回显1、与新增一致，将该绑定的数据双向绑定到级联选择器上2、拿到数据回显letarr=[val.upRegisterZoneId,val.registerZoneId];this.licenseInfo["registerZoneArr"]=arr;this.handleChangeZone(this.licenseInfo.registerZoneArr)//用第一

bigbigvier·2020-08-22 17:45

element-ui el-cascader 设置回显默认显示

data中代码data(){return{//修改时间显示值dateTime:'2020-08-0309:58:47',//活动地点和活动选项place_value:['ziyuan','jiaohu'],place_options:[{value:'ziyuan',label:'资源',children:[{value:'axure',label:'AxureComponents'},{valu

nongcunqq·2020-08-22 17:40

element-ui 修改级多选联选择器或多选下拉输入框的高度，并不影响多选后内容撑起高度。

大家在使用element-ui的时候，有可能会去修改element-ui的样式，但是在修改样式的过程中会出现各种问题，今天就来说一说我遇到的问题吧！

lxzcaicai·2020-08-22 17:56

element-ui 多选级联cascader 选择器回显问题

大家在使用element-ui的时候肯定会遇到这样一个问题就是在你使用级联选择器的时候，假设后台给你的数据是1,3,6,而你的的级联选择器选中后绑定的值可能是这样的[[1],[2,3],[4,5,6]]

lxzcaicai·2020-08-22 17:25

vue element-ui里的input自动聚焦失败的解决方法

directives:{//注册一个局部的自定义指令v-focusfocus:{//指令的定义inserted:function(el){//聚焦元素el.querySelector('input').focus()}}}但是有一个问题，该方法只有在第一次进去的时候自动聚焦解决二次进去之后也可以自动聚焦this.$nextTick(()=>{this.$refs.getFocus.focus()}

lannieZ·2020-08-22 17:05

element-ui 中el-cascader中选项框高度不正常显示

在全局样式中添加.el-cascader-menu{height:250px;}即可解决就会变为带滚动条显示+

koupou·2020-08-22 17:31

element-ui之el-checkbox遇到的一些问题

el-checkbox绑定了v-model却不能响应看到我这里使用v-model绑定了一个属性，但是当这个属性变为true的时候checkbox也不会是选中状态，后来查阅别人的文章，发现可能是我没有绑定label，别人的文章中说到，绑定了v-model却不能正常响应的原因是因为label绑定的值必须是要string，而我这里却连绑定都没绑定，后来加上了label之后checkbox就可以正常响应了

林木森森森·2020-08-22 17:37

关于vue中图片地址路径的问题,框架element-ui自定义弹框，加入图片

在打包后就变了，而动态创建的img直接加上相对地址后还是相对路径的字符串结：动态创建的img之前需要直接引入consturl=require('@/assets/logo.png')，再将地址给url；问题1：在element-ui

hanyuwebant·2020-08-22 16:47

element-ui cascader级联选择器获取数据方法

1.给cascader组件赋值一个别名2.change事件下：constcheckedNodes=this.$refs['cascaderUnit'].getCheckedNodes()console.log(checkedNodes)//获取当前点击的节点console.log(checkedNodes[0].data.label)//获取当前点击的节点的labelconsole.log(che

han8507900·2020-08-22 16:15

解决 Element-UI el-select（选择器）多选菜单换行撑开显示的问题

问题如下：想让其在一行显示，且可以横向滚动解决办法：/deep/.el-select__tags{flex-wrap:unset;overflow:auto;}结果：至此，问题得以解决。

Toward Web Developer·2020-08-22 16:31

如何在vue项目中使用Element-ui Rate 哭脸笑脸评分组件的 icon-rate-face

新手在试水element-ui的评分组件Icon版（如下）时，ctrlcv之后页面是空白想来是缺少对应的iconfont故把教程记下来，以帮助和我一样的vue新手1.首先下载字体文件https://github.com

Toward Web Developer·2020-08-22 16:31

解决element-ui的tag标签组件 closable属性关闭失效的问题

原因是少了事件处理的方法，只写closable是没有前途的，只是多了个x的框，要多写个方法才能实现真正的删除标签。{{tag.name}}exportdefault{data(){return{tags:[{name:'标签一',type:''},{name:'标签二',type:'success'},{name:'标签三',type:'info'},{name:'标签四',type:'warni

Toward Web Developer·2020-08-22 16:59

element-ui cascader 重置按钮触发清空操作

前言有时候我们的提交表单会存在重置操作，那么会重置element-ui中的联级选择器，如果你是自定义组件的联级选择器，你会发现无法清空的情况，实际上你已经在父页面的reset方法中已经重置了下拉组件为空

winner_corl·2020-08-22 16:28

element-ui中导航组件menu的一个属性：default-active

在el-menu中添加属性，然后就可以得到当我们点击的时候，就可以达到高亮的作用。操作代码如下：我们需要动态的绑定default-active

Shaojun_jita·2020-08-22 16:27

element-ui中级联选择器Cascader使用中遇到的意想不到的空白

事故现场如题，笔者在使用级联选择器的时候，明明选中了选项，但是页面并没有展示，而是展示为空，如下图所示寻找原因控制台打印出来的所有数据都是没有问题的，绑定的model也显示正常，折让我百思不得其解，最后只能请教我们公司的前端大神，大神帮我看后，看到控制台打印的信息，直接说绑定的value值重复了，系统渲染不明白了。比如，我处理后的data如下图所示[{"value":1,"label":"仓库#1

Rory3·2020-08-22 16:22

Element-UI手风琴效果（首次点击“查看详情”打开，再次点击收合）

技术栈：前端是vue，后端是javaspringboot。场景：filebeat采集docker日志文件的内容，传输到logstash进行过滤和处理，然后发送到Elasticsearch索引库存储。前端通过在页面添加一些检索条件到后端进行ES分页及多条件检索，最后将结果在前端页面进行展示。不知道，别家公司的（ELK）日志采集和展示是怎么做的？目前我们没有Kibana的XX需求就是这样的。日志等级I

DamonREN·2020-08-22 16:50

Element-UI 获取级联选择器(Cascader) label值

官方文档上一下子没找到，这里记录一下element提供了change方法只能拿到value值我们可以通过ref绑定一个namethis.$refs['name'].currentLabels拿到这个数组里面就是我们需要的label值了

$(薛定谔的喵)·2020-08-22 16:17

【vue】element-ui select结合checkbox实现全选和反选

在有些项目中会出现，select与checkbox的结合体，有的时候还需要全选与反选的功能，效果如下：在实现上，省份选择的checkbox是用css样式写的，因为用element-ui的checkbox

C_fashionCat·2020-08-22 16:15

仿制element-ui的Collapse 折叠面板组件

几天没有更新博客了，最近有点忙，没时间写博客，今天偷下懒，写写博客。废话也不多说，说正题，这个折叠面板组件的实现使用了transition过渡动画和css3的变量，使用原生的JS实现逻辑，用到部分ES6的语法，现在本人也还没搞得太透彻，理解明白了，会写一些关于ES7及其更新的语法的博客。这是效果图：这个控件比较简单，我就直接上代码了，不明白的朋友可以在评论里留言，我会改进的；或者是有大神指点我一二

zhongjunyao·2020-08-22 15:29

树形结构的数据，找出已知节点的绝对路径（el-cascader提供默认选中）

需求产品中有一个分组的功能，分组的层级不限制扩展，每个用户都会有一个分组（用户只保存当前分组的id）；实现方式使用element-ui的el-cascader的组件，使用每个节点数据的id作为键值数据结构

风伤影·2020-08-22 15:58

Element-UI 进入页面手风琴就全部展开，无需挨个点击展开

想要的页面效果是如图，进入该页面时手风琴就已经全部展开，而不需要使用鼠标挨个点击每个面板。使用的前端框架时VUE.核心的html代码如下：{{o.groupname}}{{co.dept}}总{{co.total}}年{{co.lastyear}}以上代码包含了具名插槽知识点，将slot的名字与在el-collapse-item中的title属性相绑定，插槽的内容会根据title名字的不同而自动替

ysfscdn·2020-08-22 15:52

推荐频道

##element-ui