2020.9月8日 vue 二级联动页面部分

vue项目实现二级自定义二级联动

如下图在选择二级联动的时候

html部分代码

<select v-model="selected">
    <option v-for="yx in YX" :value="yx.text">
        {{yx.text}}
    </option>
  </select>
  <select>
    <option v-for="zy in selection" :value="zy.text" :selected="$index == 0 ? true : false">
        {{zy.text}}
    </option>
  </select>

js部分代码

			  
				selected: '计信院',
				    YX: [{
				      text: '计信院',
				      ZY: [{
				        text: '软件工程'
				      }, {
				        text: '计算机科学与技术'
				      }, {
				        text: "信息安全"
				      }, ]
				    }, {
				      text: '商学院',
				      ZY: [{
				        text: '旅游管理'
				      }, {
				        text: '工商管理'
				      }, {
				        text: "行政管理"
				      }, ]
				    }, ],

作为data的初始化数据，自定义部分根据需要可随意改编成对应的分类

在计算属性里面写上双向绑定的方法

	computed: {
	    selection: {
	      get: function() {
	        var that = this;
	        return this.YX.filter(function(item) {
	          return item.text == that.selected;
	        })[0].ZY;
	      }
	    }
	  },

第二种二级联动的自定义数据

适用于uninapp

在html部分代码

					        <view class="content-box">
					             <view class="box">
					               <view class="box-item">
					                    <picker class="item-picker"  mode="multiSelector" range-key="name"  @change="classifyChange" @columnchange="columnchange" :value="classifyIndex" 
				                              :range="classifyArr">
					                         <view>{{ name }}</view>
				                     </picker>
				                </view>
					            </view>
					         </view>

在js部分的代码

dataSource: [
				                      { id: 1,
				                         name: '星期一',
				                          child: [
				                             {
			                                     id: 2,
				                                name: '星期一晴天'
				                             },
				                             {
				                                 id: 3,
				                                 name: '星期一雨天'
				                             },
				                         ],
				                      },
				                      { id: 4,
				                        name: '星期二',
				                         child: [
				                             {
				                                id: 5,
				                                 name: '星期二暴雨'
				                             },
				                             {
				                                id: 6,
				                                name: '星期二转晴'
				                         },
				                             {
				                               id: 7,
				                             name: '星期二冰雹'
				                           },
				                       ],
				                     },
				                   { id: 8,
				                       name: '星期三',
				                        child: []
				                   },
				                     { id: 9,
				                      name: '星期四',
				                      child: [
				                          {
				                               id: 10,
				                                name: '星期四大太阳'
				                         }
				                        ]
				                      },
				                    { id: 11,
				                        name: '星期五',
				                       child: [
				                           {
				                              id: 12,
				                             name: '星期五快了'
				                          },
				                          {
				                                id: 13,
				                               name: '星期五又下雨'
				                          }
				                    ]
				                     },
				                ],
								catess:'',
				
				                name: '请选择分类',
				
				                classifyArr:[[], []], // picker - 数据源
				                classifyIndex: [0, 0], // picker - 索引
				 
				               childArr:[], // 二级分类数据源
				               

在onLoad调用方法

 onLoad: function(options) {
           // 获取数据源并分出一级二级分类
            this.getAllClassify()
          },

在methods写方法里写二级联动的方法

methods：{


             // 获取数据源并分出一级二级
           getAllClassify() {
                  let dataLen = this.dataSource.length;

                for (let i = 0; i < dataLen; i++) {
                   // 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源
                    this.childArr.push(this.dataSource[i].child)
             };

               // 一级分类的数据源
               this.classifyArr[0] = this.dataSource;
  
               // 第一次打开时，默认给一级分类添加它的二级分类
                 this.classifyArr[1] = this.childArr[0]
            },
 
            // 选择商品分类
             classifyChange(e) {
                let value = e.target.value;
                 this.classifyIndex = value;
 
                 if (this.classifyArr[0].length != 0) {
                     this.name = this.classifyArr[0][this.classifyIndex[0]].name
                 };
 
                if (this.classifyArr[1].length != 0) {
                    this.name += ',' + this.classifyArr[1][this.classifyIndex[1]].name
               }
             },
  // 获取二级分类
			             columnchange(e) {
			                // 当滚动切换一级分类时，为当前的一级分类添加它的子类
			                 if (e.detail.column == 0) {
			                     // #ifdef H5
			                     // 在小程序中直接赋值无效  H5 可直接赋值
			                    this.classifyArr[1] =  this.childArr[e.detail.value]
			                     // #endif
			
			                    // #ifdef MP-WEIXIN
			                   // 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
			                      this.$set(this.classifyArr, 1, this.childArr[e.detail.value])
		                   // #endif
			                }
			             },
}