vue使用element-ui的上传，input输入框，单选多选按钮等组件

1.引入element-ui --- 复选框+上传+输入框

// element-ui
import {Checkbox, Input, Upload, CheckboxGroup } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.component( 'checkbox', Checkbox );
Vue.component( 'el-input', Input);
Vue.component( 'upload', Upload );
Vue.component( 'CheckboxGroup');

【上传组件】 

​


​

accept :限制上传的文件格式

action="111"：上传的接口地址，可以写在这里，但是因为在项目中直接写在这里会产生跨域的问题，所以我的接口是写在

 

【相关方法】：

1.beforeUpload 上传前的方法里的。在这里判断是否获取数据，然后接口上传，图片上传之后，显示预览图。

2.handleRemove 点击删除方法之后将选择的数据中showList中删除。

public beforeUpload(val): any {
    this.checkImg = true;
    const me = this;
    if ((this as any).type === 'file') { // 上传简历
        const isLt10M = val.size / 1024 / 1024 < 10;
        if (!isLt10M) {
            // this.$message.error('上传头像图片大小不能超过 10MB!');
        }
        const form = new FormData();
        form.append( 'file' , val);
        (this as any).$api.uploadResume(form).then( (resp) => {
            (this as any).$commonFun.axiosSuccessFun( {
                callBack: ( response ) => {
                    const res = response.data;
                    res.name = val.name;
                    const data = {
                        name: res.name,
                        url: res.fullPath,
                    };
                    this.fileList.push(data);
                    this.$emit('before-upload', res, (me as any).str);
                },
                this: me,
            }, resp.data);
        } ).catch( ( error ) => {
            ( this as any ).$commonFun.axiosFailFun( {
                this: me,
            }, error );
        });
    } else { // 上传图片
        this.imageUrl = URL.createObjectURL(val);
        this.imageDefaultUrlData = URL.createObjectURL(val);
        const form = new FormData();
        form.append( 'file' , val);
        (this as any).$api.uploadImage(( this as any).$commonFun.deleteEmpty(form)).then( (resp) => {
            (this as any).$commonFun.axiosSuccessFun( {
                callBack: ( response ) => {
                    const res = response.data;
                    const data = {
                        name: res.fileName,
                        url: res.fullPath,
                    };
                    this.fileList.push(data);
                    this.$emit('before-upload', res, (me as any).str);
                },
                this: me,
            }, resp.data);
        } ).catch( ( error ) => {
            ( this as any ).$commonFun.axiosFailFun( {
                this: me,
            }, error );
        });
    }
    return false;  // 屏蔽了action的默认上传
}

// 点击删除方法之后将选择的数据中showList中删除。
public handleRemove(value): any {
    const me = this;
    if (value.status !== 'ready') {
        // this.fileList = [];
        this.fileList.forEach( (item, i) => {
            if (this.fileList[i].uid === value.uid) {
                this.fileList.splice (i, 1);
            }
        });

    }
    me.$emit('on-remove', value, (me as any).str);
}

【input】：

1.input框会自动填充。为了取消该状态

先写一个默认的input：

然后在组件里面写属性:readonly; οnfοcus="this.removeAttrbute('readonly')"

2.textarea类型：

因为textarea不能通过width,height来设置高度。只能用row行属性，多少行计算 。

3.maxlength,minlength限制输入最多和最少输入字数

4.handleBlur：在输入之后检查输入的值的合法性方法

 【checkbox--复选框】

// 全选


// 单选

    
 


// 方法
public checkArray: any = []; // 选中数组
public checkAll: boolean = false; // 全选
public listArray: any = []; // 列表数据

// 全选
public handleCheckAllChange(val) {
  this.checkArray = val ? this.companyList : [];
}
// 单选
public handleChecked(val) {
  const checkedCount = val.length;
  this.checkAll = checkedCount === this.listArray.length;
}