一个下拉框展示多个下拉状态

1.先将所有状态写出来然后在以键值对的形式暴露出去

//库存
const stock = [
    {
        value: '2',
        label: '库存' 
    }
]
//出货
const sell = [
    {
        value: '4',
        label: '出货' 
    }
]
// 签收
const sign = [
    {
        value: '5',
        label: '签收'
    },
    {
        value: '2',
        label: '库存' 
    },
    {
        value: '6',
        label: '退货'
    }
]
//退货
const returns = [
    {
        value: '6',
        label: '退货' 
    },
    {
        value: '2',
        label: '库存' 
    },
    {
        value: '5',
        label: '签收'
    }
]
//过期
const expire = [
    {
        value: '3',
        label: '过期'
    }

]
const unite ={
    stock:stock,
    sell:sell,
    sign:sign,
    returns:returns,
    expire:expire
}

2.在组件内部新建一个数组

unite:unite,//成品状态
        selects:[],

3.根据后台传过来的值判断渲染哪个数组

if(res.bizProduct.status==PRODUCT_STATUS.STOCK){
            this.selects = this.unite.stock
        }else if(res.bizProduct.status==PRODUCT_STATUS.SELL){
            this.selects = this.unite.sell
        }else if(res.bizProduct.status==PRODUCT_STATUS.SIGN){
            this.selects = this.unite.sign
        }else if(res.bizProduct.status==PRODUCT_STATUS.RETURN){
            this.selects = this.unite.returns
        }else if(res.bizProduct.status==PRODUCT_STATUS.EXPIRE){
            this.selects = this.unite.expire
        }

4.页面展示

<el-col :span="5">
                <el-select v-model="formData.bizProduct.status" placeholder="请选择">
                    <el-option
                        v-for="item in selects"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-col>

来源：CSDN

作者：xunhaomeng

链接：https://blog.csdn.net/xunhaomeng/article/details/103479521