element-ui根据条件动态改变组件placeholder的值

假设有一个需求,一个下拉框select,如果无选项,则显示    暂无可用VPC,请先申请  ,如果有选项, 则显示  请选择

利用vue.js 的v-bind属性,将placeholder绑定一个动态参数,如下:

:placeholder="vpcPlaceholder"

该动态参数通过某个条件计算而来,因此将该参数写到computed()中最为合理,如下代码:

// placeholder动态绑定
<el-select v-model="form.vpc" :placeholder="vpcPlaceholder" @change="changeVPC">
    <el-option v-for="item in attrs.vpc" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
</el-select>

// placeholder文字根据条件生成
computed: {
    vpcPlaceholder() {
       return this.attrs.vpc.length ? "请选择" : "暂无可用VPC,请先申请"
    }
}

 

Logo

前往低代码交流专区

更多推荐