Vue共通リスト選択コンポーネントは、VANt-UIのスタイルを参照してください。
このコンポーネントは、共通のコンポーネントを選択します。スタイルとしてVANt UIを参照
特性:
1、ダイナミック、静的データソースをサポートします。
2、改ページの読み込みをサポートします。
3、あいまい検索をサポートします。
4、単一選択、複数選択をサポートします。
コンポーネントのソースコード:
データソース:
1、静的データソースフォーマット
1、選択したコンポーネントを使用するところにコンポーネントを導入する
import PbSelect from '@/base/PbSelect.vue'
2、静的データソースの使い方
前言
VANtのvan-pickerカスケード選択
1、カスタムフラット構造を階層構造データに変換する
2、ダイナミック$set()を各データオブジェクトにtext属性を追加して展示する。
データ処理
元のデータ
効果を選択
以上のvue公共リストの選択コンポーネントは、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 PbSelect from '@/base/PbSelect.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'}
]
},
]
変換関数tile 2 ness
//
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のスタイルを引用して、小編集で皆さんに共有しています。参考にしていただければと思います。どうぞよろしくお願いします。