1.form表单使用el-select下拉组件,应该注意options需要作为一个数组循环出来,在数据回显时就比较好处理。
<template>
<div>
<el-form
class="abow_dialog"
:model="ruleForm"
ref="ruleForm"
label-width="180px"
>
<el-form-item label="是否安装:" >
<el-select
v-model="ruleForm.value"
@change="valueChange"
placeholder="请选择是否安装"
style="width:100%;"
>
<el-option
v-for="item in valueOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data(){
return {
ruleForm: {
value: '',
},
valueOptions:[
{
label:'已安装',
value:'0'
},
{
label:'未安装',
value:'1'
},
],
}
},
created(){
},
mounted(){
},
methods: {
valueChange(value){
this.$nextTick(()=>{
console.log(value)
})
},
},
}
</script>
2.form表单使用el-radio单选组件,label是form表单绑定的值,而不是展示的参数。
<template>
<div>
<el-form
class="abow_dialog"
:model="ruleForm"
ref="ruleForm"
label-width="180px"
>
<el-form-item label="是否安装:" >
<el-radio-group v-model="ruleForm.value" @change="valueChange">
<el-radio :label="0">已安装</el-radio>
<el-radio :label="1">未安装</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data(){
return {
ruleForm: {
value: '',
},
}
},
created(){
},
mounted(){
},
methods: {
valueChange(value){
this.$nextTick(()=>{
console.log(value)
})
},
},
}
</script>
3.form表单使用el-checkbox多选框组件,label是页面展示的值,name可以是form表单的值
<template>
<div>
<el-form
class="abow_dialog"
:model="ruleForm"
ref="ruleForm"
label-width="180px"
>
<el-form-item label="水果:" >
<el-checkbox-group v-model="ruleForm.value" class="fl" style="width:150px">
<el-checkbox label="苹果" name="apple" @change="valueChange1"></el-checkbox>
</el-checkbox-group>
<el-checkbox-group v-model="ruleForm.value1" class="fl" style="width:150px">
<el-checkbox label="香蕉" name="banana" @change="valueChange2"></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data(){
return {
ruleForm: {
value: '',
value1:'',
},
}
},
created(){
},
mounted(){
},
methods: {
valueChange1(value){
this.$nextTick(()=>{
console.log(value)
})
},
valueChange2(value){
this.$nextTick(()=>{
console.log(value)
})
},
},
}
</script>