1. Elementui实战知识点随记

1.1. 表单验证

  1. 对于复杂数据,类似于对象里面包含数组,每个数组又包含多个对象,表单验证我查看了网上很多资料都说Elementui不支持,实际上,经过我官网的查看,是有解决办法的,地址如下
https://element.eleme.cn/#/zh-CN/component/form

找到动态增减表单项这一项
核心如下 <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item
prop="email"
label="邮箱"
:rules="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item>
<el-form-item
v-for="(domain, index) in dynamicValidateForm.domains"
:label="'域名' + index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
:rules="{
required: true, message: '域名不能为空', trigger: 'blur'
}"
>
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
<el-button @click="addDomain">新增域名</el-button>
<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
</el-form-item>
</el-form>

1.2. select动态加载

  1. 一定要在data里定义数据,这个亏我吃了两次,定义了个对象在data中,如下,bonus是select中需要添加的数据,userCode是默认值,如果不加默认值这个属性,哪怕在select中定义了,动态加载时也赋值了也是没用的,vue受限于javascript动态赋值的基础必须是data中定义好属性
  2. 当组件绑定一个对象的属性,发现组件点击变化没反应,十有八九就是没有定义数据了
form: {
userCode: '',
bonus:[]
}

1.3. el-input标签中不能使用@keyup.enter

  1. 有时候我们绑定不了事件到Elementui的组件,官网给出了解决办法
https://cn.vuejs.org/v2/guide/components-custom-events.html#%E5%B0%86%E5%8E%9F%E7%94%9F%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E5%88%B0%E7%BB%84%E4%BB%B6

用 v-on 的 .native 修饰符

1.4. 用axios下载Excel的坑

1.4.1. 获取不到后台文件名

  1. https://www.cnblogs.com/smiler/p/8708815.html
  2. 我的配置,重点是response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");这行
/**
* filter 接口的自定义实现
*/
@Component
@WebFilter(urlPatterns = "/**", filterName = "corsFilter")
public class CorsFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
} @Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException,
ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
// or *
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,X-Token,x-token, Content-Type, " +
"MUserAgent, " +
"MToken, " +
"UID"); // or *
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
HttpServletRequest request = (HttpServletRequest) req;
if(request.getMethod().equals("OPTIONS")) {
response.setStatus(HttpServletResponse.SC_OK);
}else{
chain.doFilter(req, res);
}
} @Override
public void destroy() {
}
}

1.5. Elementui样式不能修改?

  1. 我遇到Loading样式修改的问题,我想把Loading的转圈圈图标隐藏掉,发现直接改css样式不起作用,如果去掉scoped的确可以,可是其他用到的地方也会同样影响到,所以网上找到一个最好的办法,深度定制
来源:https://blog.csdn.net/weixin_43206949/article/details/84949814

实现:在css样式类属性前加/deep/

Elementui实战知识点随记的更多相关文章

  1. deno+mongo实战踩坑记

    自从 deno 1.0 发布以来,有关 deno 的文章很多,大多数都是在讨论怎么安装 deno .deno 有哪些特点 .deno 和 node 有哪些异同.deno是不是 node 的替代品等.咱 ...

  2. vue2.0+Element-ui实战案例

    前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例,后端数据接口,会使用json-server快速搭 ...

  3. elementui常用知识点总结

    1.淡入淡出效果: <transition name="el-fade-in-linear"> <div v-show="show" clas ...

  4. UGUI&&Animator模块知识点随记

    1.Render Texture,把这个赋给摄像机,这个对象就保存了摄像机拍摄到的纹理,再把他赋给Raw Image. 2.给Button添加事件关联时,函数不能带有yield WaitForSeco ...

  5. unity3d 知识点随记

    1.transform.translate是增加transform面板相应的数值x,y,z是以本地坐标系为方向:transform.transformdirection是以世界坐标系为方向,可以去测试 ...

  6. java 知识点随记

    JAVA 读取配置文件: Properties props= new Properties();//文件在src目录下,编译会被加载到classpath下. Props.load(Test.class ...

  7. Halcon知识点随记(每日更新)

    部分积累自重码网视频 1.dev_update_off.dev_update_on 一般dev_update_off放在开始,dev_update_on放在程序结束 dev_update_window ...

  8. unity3d API知识点随记

    1.transform.translate是增加transform面板相应的数值x,y,z是以本地坐标系为方向:transform.transformdirection是以世界坐标系为方向,可以去测试 ...

  9. C语言若干知识点归记

    一.C语言指针学习架构 1.基本数据类型---指针 2.字符串---指针 3.数组---指针 4.函数---指针 5.结构体---指针 6.共用体---指针 7.枚举---指针 8.位域---指针 9 ...

随机推荐

  1. [Bzoj3131][Sdoi2013]淘金(数位dp)(优先队列)

    3131: [Sdoi2013]淘金 Time Limit: 30 Sec  Memory Limit: 256 MBSubmit: 847  Solved: 423[Submit][Status][ ...

  2. xml文件的schema也是经过jdk编译器编译的,如果xsd没引入完整,而xml中又用到了这些标签,就会编译不通过啊。

    1.xml文件的schema也是经过jdk编译器编译的,如果xsd没引入完整,而xml中又用到了这些标签,就会编译不通过啊. 2.java编译器会下载xsd的指定链接文件,加在代码里,一起编译

  3. HadoopMapReduce运行机制

    1.map方法读取一个文件的一行记录进行分析,  输入:LongWritable(当前读取的文件位置), Text(内容) 2.map将读取到的信息进行分类,输入Context  (键值对)  ;作为 ...

  4. Windows 上通过本地搭建 Jekyll环境

    一 准备Ruby环境 1 我们首先须要安装Ruby.从站点下载Ruby 上下载Ruby最新版和对应的DevKit. 我下载的是Ruby 2.1.4 (x64)和DevKit-mingw64-6 .注意 ...

  5. 每天一个JavaScript实例-获取元素当前高度

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. Linux学习笔记总结

    零.求人不如求已:        1. 在Linux中,文件,目录,驱动,命令,脚本都视为文件,也即一切皆file. 2.记住使用Linux 的关键就是六个字: 命令.选项.參数. 3.学会看帮助,不 ...

  7. 说说Windows7 64bits下安装TensorFlow GPU版本会遇到的一些坑

    不多说,直接上干货! 再写博文,回顾在Windows7上安装TensorFlow-GPU的一路坑 Windows7上安装TensorFlow的GPU版本后记 欢迎大家,加入我的微信公众号:大数据躺过的 ...

  8. HBuilder开发App教程05-滴石和websql

    滴石 介绍 滴石是用HBuilder开发的一款计划类app. 用到HBuilder,mui.nativejs以及h5一些特性. 预期 眼下仅仅开发到todolist级别, 以后计划做成日计划,月计划, ...

  9. MySQL 存储过程传參之in, out, inout 參数使用方法

    存储过程传參:存储过程的括号中.能够声明參数. 语法是 create procedure p([in/out/inout] 參数名  參数类型 ..) in :给參数传入值,定义的參数就得到了值 ou ...

  10. POJ 1125 Stockbroker Grapevine (Floyd最短路)

    Floyd算法计算每对顶点之间的最短路径的问题 题目中隐含了一个条件是一个人能够同一时候将谣言传递给多个人 题目终于的要求是时间最短.那么就要遍历一遍求出每一个点作为源点时,最长的最短路径长是多少,再 ...