vue 공공 목록 에서 구성 요 소 를 선택 하고 Vant-UI 스타일 을 참조 합 니 다.

이 구성 요 소 는 공공 선택 구성 요소 에 사 용 됩 니 다.스타일 로 Vant UI 참조
특성:
1.동적,정적 데이터 원본 을 지원 합 니 다.
2.페이지 로 딩 지원.
3.퍼 지 검색 지원.
4.단일 선택,다 중 선택 을 지원 합 니 다.
구성 요소 원본 코드:

<template>
 <div class="gn-PubSelect">
 <van-action-sheet v-model="inShow">
  <div class="gn-PubSelect-main" :style="{'height':mainHeight}">
  <van-search class="gn-search" placeholder="        " v-model="condition" show-action>
   <van-button slot="action" size="small" type="primary" @click="inShow = false">  </van-button>
  </van-search>
  <div class="gn-select-list">
   <van-list
   v-model="loading"
   :finished="finished"
   finished-text="     "
   @load="filterSelectList"
   >
   <!--    -->
   <van-radio-group v-model="radioResult" v-if="type == 'radio'">
    <van-cell-group>
    <van-cell
     class="gn-cell"
     v-for="(item, index) in filterList"
     :title="item.Name"
     @click="radioResult = item"
     :key="item.Id"
     clickable>
     <van-radio
     checked-color="#07c160"
     slot="right-icon"
     :name="item" />
     {{item.Number}}
    </van-cell>
    </van-cell-group>
   </van-radio-group>
 
   <!--    -->
   <van-checkbox-group v-model="checkboxResult" v-if="type == 'checkbox'">
    <van-cell-group>
    <van-cell
     class="gn-cell"
     v-for="(item, index) in filterList"
     clickable
     :key="item.Id"
     :title="`${item.Name}`"
     @click="toggle(index)"
    >
     <van-checkbox
     ref="checkboxes"
     checked-color="#07c160"
     slot="right-icon"
     :name="item"
     />
     {{item.Number}}
    </van-cell>
    </van-cell-group>
   </van-checkbox-group>
   </van-list>
  </div>
  </div>
 </van-action-sheet>
 </div>
</template>

<script>
 var vm = null;
 import {postAction} from '@/api/manage'
 export default {
 /*name:'PubSelect'+Math.random(),*/
 props: {
  show: {
  type:Boolean,
  required: true
  },
  type:{
  type:String,
  required: true,
  validator: function(value){
   return value == 'radio' || value == 'checkbox';
  }
  },
  isLink:{
  type:Boolean,
  default:function () {
   return false;
  }
  },
  url:{
  type:String
  },
  selectList:{
  type:Array
  }
 },
 data() {
  return {
  inShow:false, //        
  condition:'', //     
  checkboxResult:[], //        
  radioResult:{}, //        
  filterList: [], //        
  loading:false,
  finished:false,
  page:1
  }
 },
 computed:{
  mainHeight(){
  let h = document.documentElement.clientHeight || document.body.clientHeight;
  return (h*0.9)+'px';
  }
 },
 watch:{
  condition(newVal,oldVal){
  /*           */
  this.filterList = [];
  this.page = 1;
  this.filterSelectList();
  },
  inShow(newVal,oldVal){
  //         
  this.$emit('update:show',newVal);
  //               
  if(!newVal){
   this.updateSelectList();
  }
  },
  show(newVal,oldVal){
  //          
  this.inShow = newVal;
  }
 },
 created() {
  vm = this;
  this.initCheck();
  this.filterSelectList();
 },
 mounted() {
 },
 destroyed() {
 },
 methods: {
  filterSelectList(){
  /*      */
  if(!this.isLink){
   this.filterList = [];
   for(let i=0;i<this.selectList.length;i++){
   let item = this.selectList[i];
   if(item.Name.indexOf(this.condition) != -1 || item.Number.indexOf(this.condition) != -1){
    this.filterList.push(item);
   }
   }
   this.finished = true;
  }else{
   /*      */
   this.loading = true;
   postAction(this.url,{PageSize:10,Page:this.page++,Condition:this.condition}).then((result) => {
   //       
   this.loading = false;
   //         
   if (result.length == 0) {
    this.finished = true;
   }else{
    for(let i=0;i<result.length;i++){
    this.filterList.push(result[i]);
    }
   }
   });
  }
  },
  toggle(index) {
  this.$refs.checkboxes[index].toggle();
  },
  updateSelectList(){
  /*      */
  if(this.type == 'radio'){
   this.$emit('update:result',this.radioResult);
  }else{
   this.$emit('update:result',this.checkboxResult);
  }
  },
  initCheck(){
  /*       */
  if(this.isLink){
   if(this.url == undefined || this.url == null || this.url == ""){
   throw new Error("[url]    ！");
   }
  }else{
   if(this.selectList == undefined || this.selectList == null ){
   throw new Error("[selectList]    ！");
   }
  }
  }
 }
 };
</script>

<style scoped="scoped" lang="scss">
 .gn-PubSelect {
 .gn-PubSelect-main{
  display: flex;
  flex-flow: column;
  position: relative;
  max-height: 90%;
  .gn-search{
 
  }
  .gn-select-list{
  flex: 1;
  overflow-y: scroll;
  .gn-cell{
   .van-cell__title{
   margin-right: 10px;
   flex: 1;
   }
   .van-cell__value{
   text-align: left;
   word-break: break-all;
   flex: none;
   margin-right: 10px;
   max-width: 120px;
   display: flex;
   align-items: center;
   }
  }
  }
 }
 }
</style>

구성 요소 의[동적 로드 데이터]는 봉 인 된 요청 데이터 입 니 다.axios 요청 으로 변경 해 야 합 니 다.

데이터 원본:
1.정적 데이터 원본 형식

"list": [
 {
  "Id": "",
  "Number": "",
  "Name": ""
 }
 ],

2.동적 데이터 원본 형식

{
 "Success": true,
 "Data": [
 {
  "Id": "",
  "Number": "",
  "Name": ""
 }
 ],
 "Page": 1,
 "PageSize": 3
}

사용 방식
1.선택 한 구성 요 소 를 사용 해 야 하 는 곳 에 구성 요 소 를 도입 합 니 다.
import PubSelect from '@/base/PubSelect.vue'
2.정적 데이터 원본 사용 방식

<pub-select
 id="pub-select"
 type="radio"
 :show.sync="showSelectProject"
 :selectList="list"
 :result.sync="form.project"
/>

3.동적 데이터 소스 사용 방식

<pub-select
 id="pub-select"
 type="checkbox"
 :show.sync="showSelectProject"
 :result.sync="FCourse"
 url="/assetCtl/projectList"
 isLink
/>

추가 지식:van-picker 직렬 연결 선택(사용자 정의 필드 표시)
머리말
Vant 의 van-picker 등급 선택
1.사용자 정의 평평 한 포장 구 조 를 등급 구조 데이터 로 전환한다.
2.동적$set()는 모든 데이터 대상 에 text 속성 을 추가 하여 보 여 줍 니 다.
데이터 처리
원시 데이터

[
 {id: 'node1',pid: 'root',content: 'test'},
 {id: 'node2',pid: 'root',content: 'test'},
 {id: 'node3',pid: 'node1',content: 'test'},
 {id: 'node4',pid: 'node2',content: 'test'},
 {id: 'node5',pid: 'node3',content: 'test'},
 {id: 'node6',pid: 'node1',content: 'test'}
]

전환 후 데이터

[
 {
 id: 'node1',
 pid: 'root',
 content: 'test',
 children: [
  {
  id: 'node3',
  pid: 'node1',
  ccontent: 'test',
  children: [
   {id: 'node5',pid: 'node3',content: 'test'}
  ]
  },
  {id: 'node6',pid: 'node1',content: 'test'}
 ]
 },
 {
 id: 'node2',
 pid: 'root',
 content: 'test',
 children: [
  {id: 'node4',pid: 'node2',content: 'test'}
 ]
 },
]

전환 함수 tile2nest

//          
  tile2nest(array, key, pKey, childrenKey) {
   if (!array || array.constructor !== Array) {
   return array;
   }
   //     ，        
   let ary = [...array];
   key = key || "id"; //       
   pKey = pKey || "parentId";//         
   childrenKey = childrenKey || "children";//     
   //          
   let ary2remove = [];
   ary.map(item => {
 //      text   van-picker      text  
   this.$set(item,'text',item.name);
   
   if (item[key] !== item[pKey]) {
    //     
    let p = ary.filter(c => c[key] === item[pKey]);
    if (p && p.length == 1) {
    p[0].children = p[0].children || [];
    //           
    p[0].children.push(item);
    ary2remove.push(item[key]);
    }
   }
   });

   //          
   ary2remove.map(item => {
   ary = ary.filter(c => c[key] !== item);
   });
   //            
   return ary;
  }

구성 요소 사용

<van-field readonly clickable placeholder="     " :value="form.kind" @click="showPicker = true" />
 <van-popup v-model="showPicker" position="bottom" :duration="0">
 <van-picker show-toolbar title="    " :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" @change="onChange" />
</van-popup>

onConfirm(value)   {
    let str = ""; //        /xxx/xxx/xxx
    for(let i= 0;i<value.length;i++){
     if(i>0){
      str += "/" + value[i];
     }
     else{
      str +=value[i];
     }
    }
    this.form.kind = str;
    this.showPicker = false
   },

효과.

선택 효과

이 vue 공공 목록 에서 구성 요 소 를 선택 하 였 습 니 다.Vant-UI 를 참조 하 는 스타일 링 방식 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주시 기 바 랍 니 다.