vue drop-down box radio, checkbox and default values

background:

Radio buttons and check boxes are used el-select, but the rear end passed value type is not the same, the value is passed checkbox list type: [ 'value1', 'value2'], the value of the single pass box and other types of the same; set the default value is true

Show results:

 

html code is as follows:

 1 <template>
 2     <div>
 3     <el-form ref="form" :model="form" label-width="80px">
 4     <el-row style="height:30px"  type="flex" >
 5             <el-col :span="4">
 6             <el-form-item label="单选框" >
 7             <el-select v-model="form.selectOne" style="width:140px;">
 8             <el-option label="单选1" value="1"></el-option>
 9             <el-option label="单选2" value="2"></el-option>
10             <el-option label="单选3" value="3"></el-option>
11             <el-option label="单选4" value="4"></el-option>
12             </el-select>
13                 </ >the-col> </The-form-item
14             </el-row>
15 
16             <el-row style="height:30px"  type="flex" >
17 
18              <el-col :span="12">
19              <el-form-item label="多选框" required>
20                     <el-select v-model="form.selectMultiple" style="width:300px;" placeholder="多选框"  multiple>
21                 <el-option label="多选1" value="1"></el-option>
22                 <el-option label="多选2" value="2"></el-option>
23                 <el-option label="多选3" value="3"></el-option>
24                 <el-option label="多选4" value="4"></el-option>
25                 <el-option label="多选5" value="5"></el-option>
26                 <value= "multiple choice. 6"labelOption-EL="6"></el-option>
27                 <el-option label="多选7" value="7"></el-option>
28                 </el-select>
29             </el-form-item>
30             </el-col></el-row>
31     </el-form>
32     </div>
33 </template>

 

script code is as follows:

. 1  Export default {
 2    Data () {
 . 3      return {
 . 4  
. 5          form: {
 . 6              between selectOne: '2', the radio // Default
 . 7              selectMultiple: [ '. 1', '2', '. 3'], // multiple The default value is selected
 . 8          }
 . 9      }
 10    },
 . 11  
12 is  Methods: {
 13 is  
14        },
 15  
16  
. 17  }
 18 is  </ Script >

 

Guess you like

Origin www.cnblogs.com/whycai/p/11539715.html