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

Question

页面上有两个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>

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

Answer 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('未设置油品类型或油枪号')
    }
}