qq_45018844的博客

当form表单只有一个输入框时，按下回车会去提交表单（触发submit事件）给他多加了一个input然后隐藏；这样就不会提交表单了；我们再来看下一个表单不止一个input的时候；就可以直接回车搜索了；所以就刷新了整个页面。......

avue树菜单的增删改查这里使用的是官网自带的一个菜单 传送门avue我这里自己还设置了两个菜单<avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" v-model="treeForm" ref="treeForm" @save="saveTree" @del="delTree"> <template slot-scope="s

根据数据来自动选中节点首先需要拿到这个数组的值中的id，再与树的id进行比对，通过这个属性进行设置主要是这个，根据id进行选中this.$nextTick(()=>{ //给每个id对应的check选中 this.$refs.tree.setChecked(data.deptid,true, true) })这里是整个方法，我注释掉的自动打开节点的loadTreeList(){

效果首先通过el-col进行对页面的划分<el-tree :props="props" :load="loadNode" lazy accordion check-strictly="false" @check-change = "setCheckedNodes" :default-expanded-keys= '[1]'

avue弹窗获取input框焦点效果：点击添加，弹窗出来就获取焦点，这个效果，改善用户体验上代码： setTimeout(()=>{ this.$nextTick(()=>{ this.$refs.dialogForm.getPropRef("remarks").$el.children[0].focus(); }); },0);代码写在点击的这个按钮的方法中...

效果数据联动删除成功代码删除按钮：<el-button type="text" size="mini" @click="rowDel(row.$index,row.pointId)">删除</el-button>根据pointId关联到第二个表格rowDel(index,pointId){//这是第一个表格根据索引删除一行的代码 this.projectUnitData.splice(index,1); //这是第二个表格根据pointId

表单多级联动效果图官网的多级联动定义表单<avue-form :option="dialogFormOption" v-model="dialogForm" ref="dialogForm"></avue-form>如果你们的接口中的数据的名字不一样的话，记得在option中修改props中的label，不然你的下拉框中会没有数据dicUrl是我们需要访问的接口，cascaderItem这个是你需要联动的下拉框的名字dialogFormOption:{

element表单级联cascader动态加载省市区效果图第一步：表单初始化分析代码props的含义掉接口效果图第一步：表单初始化这里面的template是使用了自定义<avue-form :option="dialogFormOption" v-model="dialogForm" ref="dialogForm"> <template slot="position" slot-scope="{row}"> <el-cascad

写个按钮首先导出是非常容易的，比起导入的话，导出只有一句话，先给个按钮<template slot="menuLeft"> <el-button size="mini" type="success" icon="el-icon-upload2" plain @click="exportExcel()">导出</el-button> </template>点击事件给这个按钮绑定点击事件exportExcel(){ // this.p

标题高德地图api注册属于自己的key高德地图官网可以进去注册，这个我就不多说了找到element官网element中的远程搜索可以直接复制使用，远程搜索和普通的搜索的区别就是，每次搜索一次就会发送一次请求<el-form :inline="true"> <el-row :gutter="20"> <el-col :span="8" > <el-select v-model="ti

elementUi导入需求：点击一个按钮，弹出对话框，有一个下拉选择框进行选择，并且将这个选择的值跟这个文件一起传给后台，并且不能为空，在点击上传全部操作完毕才可以点击确定进行上传给后台1、按钮本身的属性2.导入的基本属性3.携带三个参数为什么只有两个参数？4.请求头5.上传成功方法需求：点击一个按钮，弹出对话框，有一个下拉选择框进行选择，并且将这个选择的值跟这个文件一起传给后台，并且不能为空，在点击上传全部操作完毕才可以点击确定进行上传给后台源码：<el-upload .

项目场景：后端给你的数据中是小数点、数组、对象，如何渲染在页面上。这是效果图，上面是自己用h5渲染的，下面用到element的card上代码<template><div> <el-row :gutter="20" style="margin-left: 10px"> <div style="height: 50px"> <ul class="rightTip"> <li class="leftTip

使用axios发送请求这一块配置拦截器，为了之后的返回错误这一块发送请求，使用了es6新语法，url进行拼接，后续方便插参数，注意那个不是引号，而是tab键的上面那个符号配置跨域我写了注释哦。我们需要跨域到后端接口处，那个ws相当于请求一次发送一次请求，target表示访问的目标接口，也就是后端得接口，下面是配置代理服务器登录页面+验证码这是效果图，这是页面的结构代码：我就不多说了，这里使用到的组件是elementui<template> <div>

之前我教了大家用element文当中的远程搜索进行搜索地点element远程搜索这是效果图，点一个点就会在input框刷新一次，首先当然需要给地图添加点击事件了mapClick(e) { // 地图点击事件 if (this.map !== undefined) { if (this.projectMapMarker !== undefined) { // 如果点标记已存在则先移除原点 this.map.remove(t

disabled首先这个大家一定都知道，可以控制禁用按钮的如图所示，我之前遇到了这样的情况，点击提交成功之后，所有的input框全部禁用，我找了很多很多的百度，结果大佬告诉我，说这是element自带的一个allDisabled，不怪我没做出来。 this.$refs.giveForm.allDisabled = false可以这样设置表单的allDisabled为false就不会禁用了，界面会不太好看，大家后续可以自己对页面颜色进行调整的。...