element-ui 에서 select 구성 요소 바 인 딩 값 이 바 뀌 었 습 니 다.change 이벤트 방법 을 촉발 합 니 다.

1.vuecli 비계 설치
2.터미널 입력

cnpm i element-ui -S
요소 설치-ui
3.필요 에 따라 selection 구성 요 소 를 도입 합 니 다.
main.js 에 다음 코드 를 기록 합 니 다.

/*          */
import 'element-ui/lib/theme-chalk/index.css';
//     Select  
import {Select,Option,Dialog,Button} from 'element-ui'
Vue.use(Select)
Vue.use(Option)
Vue.use(Dialog)
Vue.use(Button)
// Vue.component(Select.name,Select);
//    Vue.use(Button)
/*          */
HelloWorld.vue 코드

<template>
<div>
  <el-dialog
   title="  "
   :visible.sync="dialogVisible"
   width="30%">
   <span>{{selVal}}</span>
   <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">   </el-button>
    <el-button type="primary" @click="dialogVisible = false">   </el-button>
   </span>
  </el-dialog>

   <el-select v-model="value" multiple placeholder="   " @change="currentSel">
    <el-option
     v-for="item in options"
     :key="item.value"
     :label="item.label"
     :value="item.label">
    </el-option>
   </el-select>
</div>
</template>

<script>
 export default {
  data() {
   return {
    options: [{
     value: '  1',
     label: '   '
    }, {
     value: '  2',
     label: '   '
    }, {
     value: '  3',
     label: '   '
    }, {
     value: '  4',
     label: '   '
    }, {
     value: '  5',
     label: '    '
    }],
    value: '',
    dialogVisible: false,
    selVal : ''
   }
  },
  methods: {
   currentSel(selVal){
    this.selVal = selVal;
    this.dialogVisible = true;
   }
  }
 }
</script>


확장 지식:element-ui 클릭 편집 팝 업 dialog 구성 요소 중 select 구성 요소 바 인 딩 값 이 바 뀌 었 지만 change 이벤트 가 발생 하지 않 는 방법
코드 구 조 는 다음 과 같다.


현상 영상 은 다음 과 같다.

현상 원인:검 사 를 통 해 이 때 클릭 조작 이 chang 사건 을 촉발 하지 않 고 배경 응답 데이터 에 주문 취소 원인 이 없 음 을 발 견 했 습 니 다.orderCanleRemark 필드 는 이 때 change 사건 을 촉발 하지 않 습 니 다.
해결 방안:
방안 1:배경 이 울 려 야 할 필드 를 맞 추 게 합 니 다.비어 있 든 없 든 필드 를 울 려 야 합 니 다.
프로젝트 2:배경 응답 데이터 할당,this.form 전에 이 필드 를 배경 응답 데이터 에 수 동 으로 추가 합 니 다.
코드 는 다음 과 같 습 니 다:

이상 의 element-ui 에서 selection 구성 요소 의 바 인 딩 값 이 바 뀌 었 습 니 다.change 이벤트 방법 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 이 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기