在开发过程中新增/编辑/查看功能往往使用一个el-form，在新增完成时，执行resetFields()方法（即：this.$refs[form].resetFields();），这样再次打开页面时，不会保留原来的数据，但是先执行编辑或者查看操作，执行resetFields()方法，再次打开新增时，会发现数据依然存在，感觉像是resetFields()方法没有起作用。原因： resetFields()是将表单项重置为初始值，而这个初始值是在Vuemounted时赋值上去的，如果在这之前对表单进行了赋值，则初始值会改变，那么后面调用resetFields()则不会生效（不会是定义时的空值）方法1
场景描述：el-table中，点击版本号触发查看配置功能，但是产品想将热区扩大，从点击版本号扩大到点击整个单元格都可以查看。解决方案：在el-table-column中的template标签里，添加一个div元素包裹版本号和el-tag，将点击事件绑定在div元素上：el-table:data="currentPageData"borderstyle="width:100%"> ... el-table-columnprop="version"label="版本号"width="250"> templateslot-scope="scope"> /*将点击事件绑定在div元素*/div@cl
ElementUI表单有3种验证方式：1、在表单中加rules属性，然后data里面写具体的验证规则就好rules里面可以写正则表达式验证。 //css中写：rules动态绑定data中数据//data中写rules规则，是一个数组，名字是标签里面的prop属性值rules:{code:[{required:true,message:'请输入项目编码',trigger:'blur'},]}2、在内部添加规则"邮箱号"rules="[{required:true,message:'请输入邮箱号',trigger:'blur'},{validator:yanz,trigger:'blur'}]
element-ui中的组件el-upload默认的行为是一张图片请求一次，在项目需求中，通常要求多张图片只向后台发送一次请求，下面的做法就可以解决这样的需求前端template> el-upload ref="upload" :action="actionUrl" :auto-upload="false" list-type="picture-card" :http-request="uploadFile" :on-preview="handlePictureCardPreview" accept="image/png,image/jpeg" multiple :limit
1完整引入elementui 执行命令安装npmielement-ui-Smian.js中完整引入importVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';Vue.use(ElementUI);2登录页login.vue后台管理系统登录如果您还没有账号请先注册//引入去除空格工具import{validUsername}from'@/utils/validate'exportdefault{name:'Login
最近在使用vscode的时候发现有时候右下角会弹出"code安装似乎损坏,请重新安装",顶部显示"不受支持"的问题。 经过排查，发现是background-cover这个插件的问题，原因应该是通过这个插件去给vscode设置自定义图片作为背景的时候修改了vscode本身的配置文件，导致了vscode认为安装已经损坏。不过这个问题是不影响使用的，如果实在想解决，可以去安装FixVSCodeChecksums这个插件： 安装完成后，按下ctrl+shift+p，在中间弹出的框中输入FixChecksums:Apply，输入过程中下面是有提示的，直接点击就好了。 右下角出现这个提示则代表配置成功：
npminstallsortablejs--save如果已经安装了vuedraggable，则可以不用安装sortablejsnpminstallvuedraggabletemplate>divstyle="width:800px"class="draggable"> //这里的id需要是tableData数组中存在的，可以换成任意唯一值就行el-table:data="tableData"row-key="id"borderalign="left">el-table-columnprop="date"label="日期"width="180">/el-table-column>el-tabl
v-infinite官网v-infinite-scroll无限滚动组件使用详解1、v-infinite-scroll="load"//load无限滚动加载的方法2、infinite-scroll-disabled//是否禁用无限滚动加载3、infinite-scroll-delay//节流时延，单位为ms4、infinite-scroll-distance//触发加载的距离阈值，单位为px5、infinite-scroll-immediate//是否立即执行加载方法，以防初始状态下内容无法撑满容器。//默认情况下，infinite-scroll-disabled是false，因此如果组件使用无
1.引入css,jslinkrel="stylesheet"href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">scriptsrc="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">/script>scriptsrc="https://unpkg.com/element-ui/lib/index.js">/script>2.element-ui官网拉取组件使用divid="app">!--日期组件-->divstyle="margin-left:20px"class="blo
1.封装根据官网配置项封装了下el-tree方便维护和复用，有用的话点赞收藏叭~template>divclass="my-tree">el-inputv-if="hasSearch"v-model="filterText"class="search-input"placeholder="输入关键字进行过滤">/el-input>slot>/slot>el-treeref="myTree":icon-class="iconClass":filter-node-method="filterNodeMethod":default-checked-keys="defaultCheckedKeys":
