weixin_43299180的博客

根据场景不一样，可以区分为整体校验和逐条校验；

以前遇到过给动态添加的表单项添加校验，但是做过之后就忘记了，时隔一年多，又遇到这样的需求，还是多层级的数据结构，所以决定借这个机会写一篇文章记录一下！！！废话不多说，直接上代码！<el-form :model="dataInfo" ref="dataInfo" label-width="40px"> <div v-for="(item,index) in dataInfo.list"> <el-form-item :label="`${index+1}、`

项目中遇到权限问题时，相信很多公司都会考虑使用树（tree）结构来实现。下面是我

这个功能思路跟轮播图差不多，下面实现思路是按照tab宽度移动，具体实现直接上代码子组件：<template> <div class="dataNav"> <el-button v-if="move != 0 && !dataLen" size='small' icon="el-icon-arrow-left" @click="navPrev"></el-button> <ul class="dataNavLis

今天遇到一个 elementUI table 表格内容展示超长，在表格列上添加 show-overflow-tooltip 属性之后，超长的内容直接被隐藏而不是出现省略号。<el-table-column align="left" prop="name" label="名称" show-overflow-tooltip> <template slot-scope="scope"> <el-button type='text'>{{scope.row.name}}&

预期效果：点击输入框旁边的图标，输入框变为可输入状态；这里控制输入的 editable 字段不是 data 原有的属性，也不是 data 赋值时就存在的字段。问题原因：在 Vue 实例创建时，以及 data 赋值时 editable 并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新。解决方法：1、给 data 赋值前把 editable 属性添加到数组里这里就不贴代码了，大概思路就是：获取到列表信息之后缓存在一个临时数组里（不可以是 data 里面定义好的对象），循环遍历

今天遇到一个需要给 for 循环体里面的 form 表单项添加校验的需求，为每一个循环的模块单独添加校验，实现如下：<el-form :model="form" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name" placeh

问题描述：经常有新增和编辑需要复用同一个弹窗的情况；刷新一下页面，先点开编辑关闭弹窗后再点击新增，这个时候再弹窗关闭的时候重置表单方法没有效果：this.$refs.form.resetFields();resetFields作用：1、对整个表单进行重置，字段重置为初始值2、移除校验结果问题分析结果：1、resetFields 重置的是初始值2、form 的初始值在 mounted 生命周期执行的时候被调用3、如果在 mounted 生命周期执行之前修改了初始值，那么resetFi

这篇文章主要介绍前端根据 table 表格里面已有的数据实现的下载功能，不需要调用接口，只是纯前端的一个功能实现；顺便介绍一下打印功能。1、打印获取表格数据，调用 window 的 print 方法；打印结束之后刷新页面重新给表格赋值。<template> <div> <el-button @click="printTable">打印表格</el-button> <el-table id="myTable" :data="tableDat

页面展示从接口获取的数据到 table 里面，包括表头和表数据html代码<el-table :data="tableList" border size="mini"> <template v-for="(item,index) in tableHead"> <el-table-column :prop="item.name" :label="item.label" :key="index"></el-table-column> </tem

在vue项目使用elementUI的开发过程中，经常会用到form表单。对于form表单的重置和清空校验经常会使用到，这里我对自己用到几种方法做一个总结：Element UI自带的清空form表单方法if(this.$refs.formData){//第一次打开dialog弹窗会报错，所以需要判断一下 this.$refs.formData.resetFields(); //重置表单数据，清除校验信息}手动重置formData里的每一项数据配合清空校验信息方法this.formData

接手过一个vue + element 项目，要求对 from 表单进行部分校验；两个按钮点击分别校验表单里面的不同项。主要用到了 elementUI 的 form 表单提供的部分校验方法 validateField ，配合 Promise.all 方法统一处理校验信息。//入参是区分点击的是那个按钮 1、2 submitForm(type) { //配置和区分需要校验项 let fieldList = []; if(type === 1){ fieldList = ['name'