下拉列表的3种实现方法

下拉列表的第一种实现方法：

1、在html中

< el-form >

    < el-form-item label = "请选择停用状态" >

        < el-select v-model = " disableRobotParam.operateType " >

            < el-option

                placeholder = "停用"

                v-for = " operate in disableTypeOption "

                :key = " operate.key "

                :label = " operate.display_name "

                :value = " operate.key " >

            </ el-option >

        </ el-select >

    </ el-form-item >

</ el-form >

2、在script 中定义：

const disableTypeOption = [

    { key: "1" , display_name: "停用(测试)" },

    { key: "2" , display_name: "停用(保养)" },

    { key: "3" , display_name: "停用(维修)" }

];

3、在data中定义：

data(){

    return{

        disableTypeOption,

    }

}

下拉列表的第二中实现方法：

1、在html中定义：

< el-select v-model = " chargerByShopData.sysAddressId " placeholder = "按商圈" class = "handle-select" >

    < el-option v-for = " item in statusArray " :key = " item.addressId " :label = " item.addressName " :value = " item.addressId " >

    </ el-option >

</ el-select >

2、在data中定义：

data(){

    return{

        statusArray: [],

    }

}

3、在methonds中：

getShopList() {

    getAddressList().then(response => {

        this .statusArray = response.data;

    });

},

下拉列表的第3种实现方法：

就是在html直接写入

< el-form-item label = "状态" prop = "chargerStatus" >

    < el-select placeholder = "请选择状态" v-model = " createChargerStakeData.chargerStatus " >

        < el-option label = "待机中" value = "1" ></ el-option >

        < el-option label = "充电中" value = "2" ></ el-option >

        < el-option label = "停用中" value = "97" ></ el-option >

        < el-option label = "异常" value = "99" ></ el-option >

    </ el-select >

</ el-form-item >

 

 

转载于:https://my.oschina.net/u/4013226/blog/2990345