1.实现效果：2.利用el-autocomplete实现远程搜索el-autocomplete是使用fetch-suggestions方法实现，当输入的时候，会调用我们提供的方法，传入的参数是输入的value，以及callback。把请求到的下拉列表通过callback返回（列表的每一项以key为value的形式传，也可以通过value-key换成其key）//:fetch-suggestions="searchNameNick"：返回获取到数据的方法，也就是说输入框一获取焦点。就会自动调用该方法拿到数据。//select="handleSelect"：当选中建议项时，调用该方法。asyncs
elementui中el-table的合并相同列内容的解决方法，简单实用废话不说，直接上代码，vue页面中的几个部分如下：注意几点：1、el-table中写上：:span-method=“objectSpanMethod”2、两个方法不用改动3、想合并哪列，在data中columnArr数组里填上列名。4、如果有bug，自己去调整吧template>div>el-table:data="tableData"style="width:100%":cell-style="{'text-align':'center'}":header-cell-style="{'text-align':'cente
elementui中的穿梭框只能实现平铺数据的穿梭，这次的需求是要树形数据穿梭，所以写的是tree组件自己组合的穿梭框divclass="flex_square">divclass="tree-tranfertree-tranfer-left">el-inputplaceholder="输入关键字进行过滤"v-model="leftFilter">/el-input>el-treeclass="filter-tree":props="defaultProps":data="dataLeft"show-checkboxref="treeLeft"node-key="id":filter-node
效果图：代码：exportdefault{name:"Demo",data(){return{tableData:[{id:'01',name:'小红',address:'北京'},{id:'02',name:'小李',address:'上海'},{id:'03',name:'小明',address:'广州'}]}}}解析：1、:header-row-style="{height:'30px'}"设置表格列标题的高度为30像素。2、:header-cell-style="{background:'#f5f7fa',padding:'0px'}"设置表格列标题的背景颜色。3、:row-style
elementui-el-select可以支持输入功能场景思路方法场景vue2+elementui的项目中，产品希望el-select可以支持输入功能，也就说用户既可以下拉选择，也可以输入任意内容。思路通过阅读elementui的官方文档，发现allow-create这个属性就可以支持用户创建新条目，但美中不足的是，创建新条目后还需要手动选择点击一下，否则无效。这个效果不太理想，我们希望的是当手动输入内容时，el-select可以充当el-input使用，也就是输完失焦即将数据写上。此时可以借助失焦事件blur。方法allow-create属性需配合filterable使用；default-f
换了个新公司搬砖，环境比以前好了干活都开心，最近有个后台要写想了想以后重复写这几个组件挺麻烦的就干脆搞了几个可复用组件,以下的内容就拿我这个新项目示例吧，直接贴代码啦首先vue-cli创建项目，有不会创建项目的靓仔靓妹们可以留言我更新一下vue-cli的使用教程然后呢在router/index.js里这么写(像什么path，name，title这些都是自定义的)importVuefrom"vue";importVueRouterfrom"vue-router";Vue.use(VueRouter);//hide:如果不需要在左侧导航栏显示这个页面的标题可以在对应的路由的meta里把hide设置
文件缩略图按官方文档说的是使用 scoped-slot 去设置缩略图模版。且需要上传的是图片，因为有预览等功能，如果上传的不是图片，会显示不出来。{handleSuccess(response,file,fileList)}":file-list="fileList"accept="image/jpg,image/jpeg,image/png":before-upload="handleBeforeUpload"ref="upload":auto-upload="true">-->这里设置了图片的格式等，用户在选择的时候，会自动校准图片格式，官方文档中提供了before-upload方法，可以
功能点1、工具栏的功能按钮要超宽不换行，宽度不够折叠进”更多“按钮；2、下拉菜单按钮和纯图标按钮默认不折叠；3、折叠前后按钮组顺序保持不变。实现思路1、默认展开全量按钮，并对其宽度进行缓存；2、循环计算展开按钮的总宽度与容器宽度的差值，并进行按钮的折叠与释放处理；3、监听窗口大小改变，不断进行步骤2；4、难点：区分放大、缩小操作进行分别处理（当然也可以每次遍历全量按钮，这样只要考虑需要折叠的情况，这个比较简单，这里不展开说明）。演示效果 index.vue内页标题查询表格标题exportdefault{components:{VpButtonList:()=>import('./vp-but
当我们使用element-ui的el-form时，想在提交表单前对其中一个表单进行验证时就可以使用element自带的方法“validateField”如图：使用示例el-form:model="registerForm"v-loading='loading':rules="rules"ref="registerForm">el-form-itemlabel="手机号码："size="small"prop="phoneNum">el-inputv-model="registerForm.phoneNum"maxlength="30"placeholder="请输入">/el-input>/el
Element-ui提供的穿梭框只支持列表，根据实际需求自己写了一个左边是树结构，右边是列表结构的穿梭框，（如果需要两边都是树结构的话，需要把右侧的逻辑参考左侧改一改）拖拽使用了vuedraggable插件效果图组件代码template>divclass="transfer-tree">divclass="transfer-panel">divclass="transfer-panel-header">el-checkboxv-model="leftAllChecked":disabled="!(leftDataList&&leftDataList.length)":indeterminate
