当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Elementui实战知识点随记

Elementui实战知识点随记

2019年05月27日  | 移动技术网IT编程  | 我要评论

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() {
    }
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网