首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Elementui实战知识点随记

Elementui实战知识点随记

作者头像
老梁
发布2019-09-10 18:42:13
7960
发布2019-09-10 18:42:13
举报

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/
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-05-26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. Elementui实战知识点随记
    • 1.1. 表单验证
      • 1.2. select动态加载
        • 1.3. el-input标签中不能使用@keyup.enter
          • 1.4. 用axios下载Excel的坑
            • 1.4.1. 获取不到后台文件名
          • 1.5. Elementui样式不能修改?
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档