在前边介绍的多级分类在ie下会提示子循环的变量未定义，例如：v-for=”(sm,key) in item.selist” 会提示sm为定义，如果不放到select里边，只是循环option ，则不会有问题，没有找到处理办法，所以换个思路，直接使用layui模拟以后的select，这样html直接有了，也不会出现select，经测试ie7到11都可以使用。
ie下多级分类效果图
1、layui模拟的select，可以F12直接找到，复制出来，代码如下：
<tr>
<td width="90" align="right">信息分类</td>
<td class='catlist'>
<div class="layui-input-inline" style='margin-right:5px;' v-for="(item,index) in items" >
<div class="layui-unselect layui-form-select "
:class="{'layui-form-selected':selectindex==index+1}" >
<div class="layui-select-title">
<input type="text" placeholder="请选择" readonly="" :value="item.selectedname"
@click="cathitbg(index)" class="layui-input layui-unselect"><i class="layui-edge"
@click="cathitbg(index)"></i></div>
<dl class="layui-anim layui-anim-upbit" >
<dd class="layui-select-tips"
@click='cathitno(index)'>请选择</dd>
<dd v-for="(sm,key) in item.selist"
:class="{'layui-this':sm.id==item.selectedid}"
:key="key"
@click='cathitsm(index,key,sm.id,sm.cat_name)'>{{sm.cat_name}}</dd>
</dl>
</div>
</div>
</div>
</td>
</tr>
- 不再使用form.on的监听事件，直接使用@click
- 根据序号，判断selectindex=序号+1，来决定展开哪一个下拉菜单，也就是增加class=‘layui-form-selected’；
- cathitbg方法展开或者关闭下拉菜单（切换），操作基础数据catselected，还有移除当前下拉框后边的数据 ；
2、js代码
new Vue({
el: '#app',
data(){
return {
basemysql:{
news_cat:[16,23,28]
},
items:[
{
"selist": {
"0": {
"id": 16,
"cat_name": "行业动态"
},
"1": {
"id": 24,
"cat_name": "公司新闻"
},
"2": {
"id": 25,
"cat_name": "首页资讯"
}
},
"selectedid": "16",
"selectedname": "行业动态"
},
{
"selist": {
"0": {
"id": 23,
"cat_name": "会员中心"
},
"1": {
"id": 26,
"cat_name": "关于我们"
},
"2": {
"id": 27,
"cat_name": "公司产品"
}
},
"selectedid": "23",
"selectedname": "会员中心"
},
{
"selist": {
"0": {
"id": 28,
"cat_name": "三级分类"
},
"1": {
"id": 29,
"cat_name": "三级分类2"
}
},
"selectedid": "28",
"selectedname": "三级分类"
}
//selectedname 默认选中cat的name
//selectedid 默认 选中cat的ID
],
selectindex:0, //多级分类下拉展开 哪一个下拉分类
}
},
methods:{
cathitbg:function(m){
if(this.selectindex==m+1){
this.selectindex=0;
}else{
this.selectindex=m+1;
}
//this.$forceUpdate();
console.log(this.selectindex);
},
cathitno:function(m){
//console.log(this.items[m].catselected);
this.items.splice(parseFloat(m)+1,(this.items.length-1)-(parseFloat(m)));
this.items[m].selectedid=0;
this.items[m].selectedname="";
this.selectindex=0;
// this.$forceUpdate();
},
cathitsm:function(m,b,c,d){
var that=this;
that.selectindex=0;
//this.$forceUpdate();
that.items.splice(parseFloat(m)+1,(that.items.length-1)-(parseFloat(m)));
that.items[m].selectedid=c;
that.items[m].selectedname=d;
that.basemysql.news_cat.splice(parseFloat(m)+1,(that.basemysql.news_cat.length-1)-(parseFloat(m)));
if(c!=""){
axios.post("/api/getparcat", {
parid: c
})
.then(function (response) {
if(response.data.selist!=""){
that.items.push(response.data);
//console.log(that.items[1]);
}
})
.catch(function (error) {
console.log(error);
});
}
}
},
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));
//console.log(response.data.length);
that.items=response.data;
}
console.log(JSON.stringify(that.items[0].catselected));
})
.catch(function (error) {
console.log(error);
});
}
});
- 不再使用form.on的监听事件，直接使用@click；
- mounted（）内使用axios，用于打开页面读取数据库分类信息；
- this.selectindex==m+1 如果存储的和点击的一样 说明自身的点击要隐藏下拉菜单；
3、后台php代码
public function newscat()
{
$catid=input('parid');//pard news_cat:[16,23,28]
$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();
$catinfo=Db::name('web_cat')->field('cat_name')->find($catarr[$i+1]);
//$catlist['catselected']=false;
$list[$i]=array('selist'=>$catlist,'selectedid'=>$catarr[$i+1],'selectedname'=>$catinfo['cat_name']);
}
exit(json_encode($list,JSON_UNESCAPED_UNICODE));
}
public function getparcat()
{
$catid=input('post.parid');
$con=" webid=17 and parentid=".(int)$catid;
$list=Db::name("web_cat")->field('id,cat_name')->where($con)->select()->toArray();
exit(json_encode(array('selist'=>$list),JSON_UNESCAPED_UNICODE));
}
- newscat方法初始化多级分类的信息
- getparcat方法触发下拉菜单的选项的时候读取的下级分类的信息
vue在ie下不能渲染模板，需要在页面头部加载browser.min.js，
ie下axios不起作用，提示ReferenceError: “Promise”未定义，在头部加载polyfill.js
这2个js网上都有提供下载，如果找不到也可以联系我。
