首页问答社区 PHP技术正文

php手把手教你做网站（十五）vue,layui多级分类,无限级分类

2022-10-11 21:44:13 120 0

目标：

普遍适用，1级分类、2级分类甚至更多级的分类；
选择1级分类的时候，后边的select全部消失，留下2级分类显示请选择状态；
也是对2的补充，如果1级分类下有2级分类，2级分类显示请请选择，反之不出现2级分类下拉框；

思路：

这里完全抛弃jquery，但是思路是一样的，只不过用jquery改变的是节点，vue改变的是data基础原始数据，只是操作对象发生改变而已。

获取点击的是第几个select，开始的想法是@change=‘getid（key）’但是经过layui渲染以后，发现这里是消失的（可以F12查看），也就没有办法使用change事件，只能是select加上参数:cindex=”索引index”，通过form监听select获得序号；
通过splice删除基础数据，data中news_cat序号后边的数据我的分类是存放到news_cat里边；
指定默认选择的option编号；

图1 多级分类效果图

html代码：

 
信息分类

select说明：:cid=”index”，索引也就是我们要得到的序号，lay-filter=”myselect” 用于layui监听select的change事件，v-model=”item.selist.selected” 绑定默认选中。

1、vue代码：

 new Vue({
    el: '#app',
    data(){
		return {
			basemysql:{
				news_cat:[16,23,28]
			},
		  items:[

		  ], 
		}
   },
   mounted () {
      layui.use('form', function(){
			    let form = layui.form;
      });
   }

要写入数据库的都放到了basemysql，其他的放到外边，提交的时候只需要提交basemysql中的数据；

items用于存放下拉框的信息也就是分类的数据；

news_cat存放了添加文章的时候选择的分类；

2、使用axios获取默认选中的同级分类信息，放到了mounted () {}

 mounted () {
    var that=this;
		axios.post("/api/newscat", {
			parid: JSON.stringify(that.basemysql.news_cat )
		})
		.then(function (response) {
			if(response.data.selist!=""){
				console.log(JSON.stringify(response.data));
				that.items=response.data; 
			}
			console.log(that.items);
			that.$nextTick(function () {
				layui.use(['form'], function(){
					layui.form.render('select');
				});
			});
		})
		.catch(function (error) {
			console.log(error);
		});
}

JSON.stringify(that.basemysql.news_cat )获取news_cat初始数据转成字符串作为参数传递给/api/newscat用于作为条件获取下级分类；
返回值不为空则向data赋值覆盖以前的数据，that.items=response.data;，返回的json格式包含[]，所以直接覆盖以前的；
layui再次渲染；

 that.$nextTick(function () {
				layui.use(['form'], function(){
					layui.form.render('select');
				});
});

3、php代码

     public function newscat()
    {
		$catid=input('post.parid');
		$list=array();
	  preg_match("/\[(.*)\]/U",$catid,$catarr);
		$catarr=explode(",","0,".$catarr[1]);
    for($i=0;$i<=count($catarr)-2;$i++){
			$con=" webid=17 and parentid=".(int)$catarr[$i];
			$catlist=Db::name("web_cat")->field('id,cat_name')->where($con)->select()->toArray();
      $catlist['selected']=$catarr[$i+1];
			$list[$i]=array('selist'=>$catlist);
		}
	   exit(json_encode($list,JSON_UNESCAPED_UNICODE));

    }

传递过来的参数parid格式是[分类编号]，可以直接str_replace替换掉[]，我这里使用的截取；截取或者替换以后的字符串，前边要补充0,以获得父级分类，例如：传递过来参数为2,3,5，那么同级别的下拉分类，父级编号就应该是0,2,3；

$con=” webid=17 and parentid=”.(int)$catarr[$i]; 按照条件读取同级别分类的下拉框，我这里是分类比较多额外多加了 webid=17限制，存入数组，转json输出即可；

$catlist[‘selected’]=$catarr[$i+1];这里是select默认选中的编号；

4、select下拉触发事件

由于不能在select上加@change方法，这里使用layui对select的监听，

密码

记住登录状态忘记密码？