vue 公共列表選擇元件,引用Vant-UI的樣式方式
阿新 • • 發佈:2020-11-03
此元件用於公共選擇元件。引用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": "","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',{id: 'node3',pid: 'node1',{id: 'node4',pid: 'node2',{id: 'node5',pid: 'node3',{id: 'node6',content: 'test'} ]
轉化後資料
[ { id: 'node1',content: 'test',children: [ { id: 'node3',ccontent: 'test',children: [ {id: 'node5',content: 'test'} ] },content: 'test'} ] },{ id: 'node2',children: [ {id: 'node4',]
轉化函式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的樣式方式就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。