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.代码展示 

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




​

04.总结

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

placeholder是提示语

disabled是是否禁用

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的值一样就会出现出来

猜你喜欢

转载自blog.csdn.net/2201_75705263/article/details/132333347