如何在iview中设置Select组件禁用?

Fick
  • 25

页面上有两个radio组件和两个select组件,通过radio来设置激活指定的select,禁用另外一个。这应该怎么实现?

教程上只能通过配置select的disabled属性来控制select是否禁用。通过setOilOrGunNumber来设置时会抛出错误,截图如下:

图片描述

相关代码

setOilOrGunNumber(val) {
    if(val === '0') {
        this.$refs.OilType.disabled = true;
        this.$refs.GunNumber.disabled = false;
    } else if (val === '1') {
        this.$refs.OilType.disabled = false;
        this.$refs.GunNumber.disabled = true;
    } else {
        console.log('未设置油品类型或油枪号')
    }
}


<Row type="flex" :gutter="16" justify="start">
    <i-col span="5">
        <div style="float:right"><span>*</span>油品类型:</div>
    </i-col>
    <i-col span="19">
        <Select clearable v-model="voiltypeid" ref="OilType">
            <OptionGroup label="汽油">
                <Option  v-for="item in oilsList1" :value="item.id" :key="item.id" >{{ item.oilname }}</Option>
            </OptionGroup>
        </Select>
    </i-col>
</Row>
<!-- 选择油枪号 -->
<Row type="flex" :gutter="16" justify="start">
    <i-col span="5">
        <div><span>*</span>油枪号:</div>
    </i-col>
    <i-col span="19">
        <Select clearable v-model="voiltypeid" ref="GunNumber">
            <OptionGroup label="汽油">
                <Option  v-for="item in oilsList1" :value="item.id" :key="item.id" >{{ item.oilname }}</Option>
            </OptionGroup>
        </Select>
    </i-col>
</Row>


请问这样的需求应该如何实现?

回复
阅读 3.6k
1 个回答

通过绑定一个变量如disabled,通过修改this.disabled=true/false来实现是否禁用

<Row type="flex" :gutter="16" justify="start">
    <i-col span="5">
        <div style="float:right"><span>*</span>油品类型:</div>
    </i-col>
    <i-col span="19">
        <Select clearable v-model="voiltypeid" ref="OilType" :disabled="disabled">
            <OptionGroup label="汽油">
                <Option  v-for="item in oilsList1" :value="item.id" :key="item.id" >{{ item.oilname }}</Option>
            </OptionGroup>
        </Select>
    </i-col>
</Row>
<!-- 选择油枪号 -->
<Row type="flex" :gutter="16" justify="start">
    <i-col span="5">
        <div><span>*</span>油枪号:</div>
    </i-col>
    <i-col span="19">
        <Select clearable v-model="voiltypeid" ref="GunNumber" :disabled="disabled1">
            <OptionGroup label="汽油">
                <Option  v-for="item in oilsList1" :value="item.id" :key="item.id" >{{ item.oilname }}</Option>
            </OptionGroup>
        </Select>
    </i-col>
</Row>

setOilOrGunNumber(val) {
    if(val === '0') {
        this.disabled = true;
        this.disabled1 = false;
    } else if (val === '1') {
        this.disabled = false;
        this.disabled1 = true;
    } else {
        console.log('未设置油品类型或油枪号')
    }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏