此组件用于公共选择组件。引用Vant UI 作为样式
特性：
1、支持动态、静态数据源。
2、支持分页加载。
3、支持模糊搜索。
4、支持单选、多选。
组件源码：
确认
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="filterSelectList"
>
class="gn-cell"
v-for="(item, index) in filterList"
:title="item.Name"
@click="radioResult = item"
:key="item.Id"
clickable>
checked-color="#07c160"
slot="right-icon"
:name="item" />
{{item.Number}}
class="gn-cell"
v-for="(item, index) in filterList"
clickable
:key="item.Id"
:title="`${item.Name}`"
@click="toggle(index)"
>
ref="checkboxes"
checked-color="#07c160"
slot="right-icon"
:name="item"
/>
{{item.Number}}
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
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
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 net
转播
