vue 下拉框單選、多選以及默認值

背景：

單選框和多選框 都是使用了 el-select，但傳給后端的值類型不一樣，多選框傳的值是 list類型: ['value1','value2'] ,單選框傳值和其他類型一樣；設置默認值也是如此

效果展示：

 

html 代碼如下：

<template>
    <div>
    <el-form ref="form" :model="form" label-width="80px">
    <el-row style="height:30px"  type="flex" >
            <el-col :span="4">
            <el-form-item label="單選框" >
            <el-select v-model="form.selectOne" style="width:140px;">
            <el-option label="單選1" value="1"></el-option>
            <el-option label="單選2" value="2"></el-option>
            <el-option label="單選3" value="3"></el-option>
            <el-option label="單選4" value="4"></el-option>
            </el-select>
                </el-form-item></el-col>
            </el-row>

            <el-row style="height:30px"  type="flex" >

             <el-col :span="12">
             <el-form-item label="多選框" required>
                    <el-select v-model="form.selectMultiple" style="width:300px;" placeholder="多選框"  multiple>
                <el-option label="多選1" value="1"></el-option>
                <el-option label="多選2" value="2"></el-option>
                <el-option label="多選3" value="3"></el-option>
                <el-option label="多選4" value="4"></el-option>
                <el-option label="多選5" value="5"></el-option>
                <el-option label="多選6" value="6"></el-option>
                <el-option label="多選7" value="7"></el-option>
                </el-select>
            </el-form-item>
            </el-col></el-row>
    </el-form>
    </div>
</template>

 

script 代碼如下：

export default {
  data() {
    return {

        form: {
            selectOne:'2',//單選默認值
            selectMultiple:['1','2','3'],//多選默認值
        }
    }
  },

methods: {

      },


}
</script>