基于vue的select的option某一选项的禁用

直接在v-for渲染option选项里使用disable:

<tempalte>
<div>
<select v-model="customValue" :style="{height: _height}">
     <option
          v-for="item in customList"
          :key="item.value"
          :disabled="item.value == 0"
          :value="item.value">
          {{item.name}}
     </option>
</select>
</div>
</template>
<script>
export default{
    data(){
         return {
            customList: [
                {name: '全部国家', value:0},
                {name: '中国', value:1},
                {name: '俄罗斯', value:2},
                {name: '英国', value:3},
                {name: '日本', value:4},
                {name: '韩国', value:5},
                {name: '越南', value:6},
                {name: '加拿大', value:7},
                {name: '意大利', value:8},
            ],
            customValue: 0,
        }
    }
}
</script>



主要起禁用代码:disabled="item.value == 0",这里通过对比item.value==0去筛选customListde的{name: "全部国家",value:0}禁用。


版权声明:本文为xinfeiyanwu1原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。