el-form组件相关的一些基础使用

el-checkbox

01.description

多选单选框

02.场景举例

需要对每一条数据展示她的某些状态是否存在

03.代码展示 

<el-checkbox v-model="query.isAutoAccptncsign" true-label='1' false-label='0' :disabled="ifReview?true:false">自动发起承兑应答</el-checkbox>

04.总结

v-model绑定了相应的属性值

true-label指的是属性值为'1'的时候要打上勾勾的

fasle-label指的是属性值为’0‘的时候要取消勾勾的

disabled是是否禁用

el-input 

01.description

input输入框

02.场景举例

登录之类的，增加编辑之类的场景

03.代码展示 1

<el-input v-model="query.draweeBankNo" :disabled="true" :placeholder="ifReview?'':'请输入'" />




​

 04.代码展示2

<el-input
                  v-model="query.billNo"
                  maxlength="32"
                  clearable
                   @change="change()"
                  placeholder="请输入票据(包)号"
                  @input="(v) => (query.billNo = v.replace(/\D/g, ''))"
                />



export default {


    methods:{

        change(val){

            console.log(val)

        }


    }


}

04.总结

v-model绑定了相应的属性值

placeholder是提示语

disabled是是否禁用

@input=“（v)=>(query.billNo=v.replace(/\D/g,''))”    输入的内容不能有非数字

@change=change  这个很重要，因为我们及时需要处理相关的value值，保证接口传输数据时候正确

el-select 

 01.description

inpout输入带下拉选项框

02.场景举例

输入框需要下拉框选项的时候使用

03.代码展示 

<el-select v-else-if="tagType == 'list'" v-model="dictValue" :multiple="multiple" :filterable="filterable"
    :clearable="isClearable" :placeholder="placeholder" :disabled="disabled" :size="selectSize" @change="handleInput">
    <el-option v-for="(item, key) in dictOptions" :key="key" :label="item" :value="key">{{ item }}</el-option>
  </el-select>

​

04.总结

v-if是否显示

v-model是双向绑定的值

clearable是可以清楚的功能

size是尺寸的问题

@change是改变值得时候得方法获取相应得value

multiple是是否多选

filterable是是否显示匹配选项，比如你搜索的value跟option的值一样就会出现出来