1. Elementui实战知识点随记
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动态加载
- 一定要在data里定义数据，这个亏我吃了两次，定义了个对象在data中，如下，bonus是select中需要添加的数据，userCode是默认值，如果不加默认值这个属性，哪怕在select中定义了，动态加载时也赋值了也是没用的，vue受限于javascript动态赋值的基础必须是data中定义好属性
- 当组件绑定一个对象的属性，发现组件点击变化没反应，十有八九就是没有定义数据了
form: {
userCode: '',
bonus:[]
}1.3. el-input标签中不能使用@keyup.enter
- 有时候我们绑定不了事件到Elementui的组件，官网给出了解决办法
1.4. 用axios下载Excel的坑
1.4.1. 获取不到后台文件名
- 看
https://www.cnblogs.com/smiler/p/8708815.html - 我的配置，重点是
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样式不能修改？
- 我遇到Loading样式修改的问题，我想把Loading的转圈圈图标隐藏掉，发现直接改css样式不起作用，如果去掉scoped的确可以，可是其他用到的地方也会同样影响到，所以网上找到一个最好的办法，深度定制
来源：https://blog.csdn.net/weixin_43206949/article/details/84949814
实现：在css样式类属性前加/deep/
