0
点赞
收藏
分享

微信扫一扫

element ui 中form的select option 中怎么禁用某些选项?

element ui form

option上面添加禁用属性(添加后默认为true)

<option disabled></option>

element ui 中form的select option 中怎么禁用某些选项?_数据

例如:我禁用value=shanghai的这条

<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="活动区域">
    <el-select v-model="formInline.region" placeholder="活动区域">
      <el-option label="区域一" value="shanghai" disabled></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        formInline: {
          region: ''
        }
      }
    },
    methods: {
    }
  }
</script>

如果你是循环的数据就用动态绑定 v-bind:disabled="条件为true触发"

<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="活动区域">
    <el-select v-model="formInline.region" placeholder="活动区域">
      <el-option :label="item.label" :value="item.value" :disabled="item.value==='shanghai'&&item.label==='区域一'" v-for="(item,index) in regionList" :key="index"></el-option>
    </el-select>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        formInline: {
          region: '',
          regionList: [{value: "shanghai",label: "区域一",}{value: "beijing",label: "区域二",}{value: "guangzhou",label: "区域三",}],
        }
      }
    },
    methods: {
    }
  }
</script>

举报

相关推荐

0 条评论