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+ '  ' + 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',
}