xm-select远程搜索

1.官网

xmSelect.render({
		el: '#demo1', 
		autoRow: true,
		toolbar: { show: true },
		filterable: true,
		remoteSearch: true,
		remoteMethod: function(val, cb, show){
			//这里如果val为空, 则不触发搜索
			if(!val){
				return cb([]);
			}
			//这里引入了一个第三方插件axios, 相当于$.ajax
			axios({
				method: 'get',
				url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
				params: {
					keyword: val,
				}
			}).then(response => {
				var res = response.data;
				cb(res.data)
			}).catch(err => {
				cb([]);
			});
		},
	})

2.实际应用远程搜索

<div class="xm-select" id="entrustingUnit"></div>
idSelect = xmSelect.render({
    el: '#caseNameId',//id名字
    radio: true,//单选
    clickClose: true,//选中后关闭
    theme: {
        color: '#315AFF',
    }, //主题
    repeat: true,//开启重复选择
    model: {
        icon: 'hidden',//隐藏多选框/单选按钮
        label: {
            type: 'text',//选中后显示在多选框的是文本，还可以是块块
        },
    },
    filterable: true, //触发搜索
    remoteSearch: true,
    //监听方法
    on: function (data) {
        //此处可以拿到选中的值
        if(data.arr.length >0){
            let caseName = data.arr[0].caseName
        }
    },
    remoteMethod: function(val, cb, show){
        //这里如果val为空, 则不触发搜索
        if(!val){
            $.ajax({
                url: "",//后端接口地址
                data:{
                    
                },
                success: function (data) {
                //渲染的数据的Key和value需要是name和value
                /*比如：
                data: [
                {name: '张三', value: 1},
                {name: '李四', value: 2},
                {name: '王五', value: 3},
                ]
                */
                    var data1 = JSON.parse(data)
                    let data2 = []
                    data1.forEach((item,index) =>{
                        data2.push(item)
                        data2[index].name = item.name+ '&emsp;&emsp;' + item.takeTimeStr
                    })
                    cb(data2)
                }
            })
        }else {
            $.ajax({
                url: "",
                data: {},
                async: false,
                success: function (data) {
                        let res = data;
                        let arr = [];
                        res.map(item => {
                            let json;
                            json = {
                                    name: item.deviceName,
                                    value: item.deviceId
                                };
//此处是数据初始化的时候，如果有数据设置selected ，首次选中
                                if(initval && initval.split(',').includes(item.deviceId)){
                                    json.selected = true;
                                }
                            arr.push(json);
                        });
                        cb(arr)
                    },
            })
        }
    },
})

3.一些产生的bug及应对

3.1远程搜索搜索栏输入数据后搜出结果为空

若搜索栏有数据，会自动走到搜索接口，当返回数据为时，关闭下拉搜索框，接着再次打开，搜索栏为空，搜索结果也为空。如图

如果要解决这个问题，可以加上show，展开下拉的回调，在里面通过再次更新xm-select从而使得重新刷新

show: function (){
                idSelect.update();
            },

3.2show之后初始化造成的影响

由于show之后会走到remoteMethod重新请求接口渲染页面，如果此时初始化有数据，那么每次show之后都只会展示初始化数据，无法完美的持续操作

解决办法：监听选中数据，选中之后替换初始化数据

//多选
on: function (data){
                //由于先show后remoteMethod,先初始化再initval,change选中项后,initval需被覆盖
                if(data.change.length>0){
                    let arr = [];
                    data.change.forEach(item => {
                        arr.push(item.value);
                    });
//此处是因为我的初始化数据是逗号隔开的字符串
                    initval = arr.join(',').slice(0,-1);
                }
            },
//单选
on: function (data){
                //由于先show后remoteMethod,先初始化再initval,change选中项后,initval需被覆盖
                if(data.change.length>0){
                    initval = data.change[0].value;
                }
            },

4.下拉树

tree: {
	//是否显示树状结构
	show: true,
	//是否展示三角图标
	showFolderIcon: true,
	//是否显示虚线
	showLine: false,
	//间距
	indent: 20,
	//默认展开节点的数组, 为 true 时, 展开所有节点
	expandedKeys: [], 
	//是否严格遵守父子模式
	strict: true,
	//是否开启极简模式
	simple: false,
	//点击节点是否展开
	clickExpand: true,
	//点击节点是否选中
	clickCheck: true,
},

4.1下拉树父节点没有选择框

iconfont: {
      parent: 'hidden',
   }