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

2022-10-11 21:44:13 120 0
魁首哥

目标:

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

思路:

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

  1. 获取点击的是第几个select,开始的想法是@change=‘getid(key)’但是经过layui渲染以后,发现这里是消失的(可以F12查看),也就没有办法使用change事件,只能是select加上参数:cindex=”索引index”,通过form监听select获得序号;
  2. 通过splice删除基础数据,data中news_cat序号后边的数据我的分类是存放到news_cat里边;
  3. 指定默认选择的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);
		});
}  
  1. JSON.stringify(that.basemysql.news_cat )获取news_cat初始数据转成字符串作为参数传递给/api/newscat用于作为条件获取下级分类;
  2. 返回值不为空则向data赋值覆盖以前的数据,that.items=response.data;,返回的json格式包含[],所以直接覆盖以前的;
  3. 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的监听,

忘记密码?

图形验证码