vue select 구성 요소를 사용 및 비활성화하기 위한 구현 코드

이 글에서는 vue-select 컴포넌트를 사용하고 비활성화하는 구현 코드를 주로 소개합니다. 이제 모두와 공유하겠습니다. 필요한 친구들이 참고하면 됩니다.

비즈니스: 메시지를 푸시하는 방법에는 "WeChat"이 있습니다. 및 "메일"을 사용하려면 WeChat을 통해 보낼 때 "보내기 응용 프로그램"을 선택해야 하며 이메일을 보낼 때는 필요하지 않습니다.

WeChat을 통해 보낼 때 페이지는 다음과 같습니다.

이메일을 보낼 때 선택기

공식 홈페이지에는 구체적인 예시가 나와 있지 않지만,

구현:

추가 비활성화된 속성을 지정하고 다음과 같은 빨간색 표시 형식으로 작성합니다. ; 이 선택 상자를 사용할 수 있는지 여부를 결정하기 위해 TRUE 및 FALSE 값을 저장하는 isAble 변수를 정의합니다.

<Select <span style="color: rgb(255, 0, 0);">v-bind:disabled="isAble" </span>clearable v-model="dataAgentEntity.ID" style="width:240px"> 
   <Option v-for="item in dataAgent" :value="item.ID" :key="item.ID">{{ item.name }}</Option> 
 </Select> 

export default { 
  data(){ 
    return{ 
      isAble: false,//select下拉框是否可用 
    } 
  }

그런 다음 로직의 작동 변수 isAble의 값은 구성요소의 사용 가능 및 사용 안함 상태를 변경합니다

 methods:{ 
     Test(){ 
      var vm = this; 
       if (vm.alertType == '邮件') { 
        vm.isAble = true; //不可用 
      } 
        
     }  
}

테스트 방법은 다시 변경할 때 판단을 사용할 수 없다고 기록합니다. WeChat은 사용 가능 상태가 되어야 합니다. 그렇지 않으면 또 다른 버그가 묻힐 것입니다. 하하. 하지만 이것은 비즈니스 논리일 뿐이며 상황에 따라 다릅니다.

관련 권장 사항:

vue 두 번째 수준 연결 선택 첫 번째 옵션 값은 두 번째 수준에서 기본적으로 선택됩니다.

위 내용은 vue select 구성 요소를 사용 및 비활성화하기 위한 구현 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!