导航栏

文章

  • 首页
  • 查看历史

Subscriptions

  • 纯色玫瑰
  • 适者生存
  • 人生如初见
  • 行云集
更多作者

导航栏

  • 设置
  • 登陆
    • QQ登陆 微博登陆
  • 其他
    • 图标库
  • 夜间模式
  • 退出登录

【亲测】xm-select 下拉框搜索不存在则创建条目以及动态数据调用 【亲测】


今天项目上用到了select的下拉框,需要的功能是 下拉框能输入能多选,

正好再layui的第三方组件找到了xm-select的组件,超级好用,超级推荐,

select的功能基本是发掘到极致!

这里科技小锅盖就是遇到了自己已保存的相关的值和所需类型的值需要在前台渲染上,

遇到的问题,浪费了好一会才解决,这里看看吧!


1、已保存的值和公共的类型组合成一个数组

//行业赛道
$hangye=AuthType::where("")->where("type",2)->select();
foreach ($hangye as $k=>$v){
    $hangye_arr1[]=$v["title"];
}
foreach ($hangye_arr1 as $k=>$v){
    $new1[$k]["value"]=$v;
    $new1[$k]["name"]=$v;
}

$hangye_arr2=explode(",",$list["hangye"]);
foreach ($hangye_arr2 as $k=>$v){
    $new2[$k]["value"]=$v;
    $new2[$k]["name"]=$v;
    $new2[$k]["selected"]=true;
}

// 整体思路就是把已选的和未选的组成一个数组再通过in_array筛选
//(筛选后会出现重复的数组过滤一下就可以)
$new_array=array_merge($new2,$new1);


2、把组合好的数组再遍历一下,在通过in_array 筛选一下组成新的数组。

(1)、组成的新数组已选的值selected为true的值会有重复用array_unique去除重复的数组。

 (2)、去重的数组会有新的键名,再用array_values重新获取一下值就可以。

foreach ($new_array as $k=>$v){
    if(in_array($v["value"], $hangye_arr2))
    {
        $tmp_arr[$k]["value"]=$v["value"];
        $tmp_arr[$k]["name"]=$v["name"];
        $tmp_arr[$k]["selected"]=true;
    }
    else {
        $tmp_arr[$k]["value"]=$v["value"];
        $tmp_arr[$k]["name"]=$v["name"];
        $tmp_arr[$k]["selected"]=false;
    }
}
//二维数组去重并获取去重后value值
$new_arr=array_values(array_unique($tmp_arr, SORT_REGULAR));

return json_return("0","success",$new_arr);

//这里一定要看好xm-select所需要的的返回值的参数


3、前端调取xm-select的相关(我这里调用的是)

这里需要调用两个js、 xm-select的就是和axios的js 否则无法远程调取参数


//想创建就必须要开启本地搜索
xmSelect.render({	//...
	filterable: true,
	create: function(val, arr){		
        //返回一个创建成功的对象, val是搜索的数据, arr是搜索后的当前页面数据
		return {
			name: '创建-' + val,
			value: val
		}
	}
})

axios({	method: 'get',	
        url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
}).then(response => {	var res = response.data;
	demo2.update({		
        data: res.data,		
        autoRow: true,
	})
});


到这里就结束啦,xm-select还是很推荐的,麻烦一点的就是后端的数据的组合稍微麻烦一些,不过还好啦,哈哈哈



推荐

【亲测】Thinkphp6 Api返回validate验证器json参数【亲测】

2021-01-19 15:33:56

小米10 Pro+ 要来啦或采用今年最强快充组合

2020-07-30 17:15:14

【亲测】Tp5+下载文件重新命名文件名称【亲测】

2020-09-09 10:36:00

2020上半年最值得购买的八款高刷新率手机(上):你怎么选?

2020-07-28 15:49:23

进击的巨人第四季热浪袭来 第一集分享

2020-12-07 11:25:30

iOS 14测试版又迎更新,你更新了吗?

2020-07-27 09:22:51

【亲测】PHProm没有连接 ftp入口 (Deployment)【亲测】

2020-07-15 09:20:55

【亲测】php7 安装 phpoffice/phpspreadsheet 遇到的问题【亲测】

2020-07-31 16:41:04

Redmi 9A评测:超长续航+大内存,百元智能机首选

2020-07-31 10:31:36

【亲测】vue-element-admin v4.x 去除mock数据请求自己接口 【亲测】

2020-12-04 16:43:30

陕ICP备20008812号 | 科技小锅盖 保留所有权利 | 网站地图 |
    友情链接:
  • 米醋儿
  • 笔墨
  • 新浪微博