Vue二级联动(滚动型)

Vue二级联动(2)

  本文主要介绍vue二级联动的另一种形式。

1.vue-multilevel-picker Vue 组件库 三级联动

*原文网址链接:(https://www.jianshu.com/p/9aa54a2a2540)
*Github地址:(https://github.com/darkdragonblade/vue-multilevel-picker)
(1)在Github中下载程序压缩包
(2)install
npm install multilevel-picker
import multilevel from ‘multilevel-picker’; (在main.js里添加 )
Vue.use(multilevel) (在main.js里添加 )

2.三级联动程序运行

(1)三级联动原代码

<template>
  <div class="home">
    <multilevel @done="done" @change="change" :data="data" :column="'3'"></multilevel>
  </div>
</template>

<script>
import cityData from '../../../../city-data.json';
import multilevel from 'multilevel-picker';
export default {
  name: 'home',
  data () {
    return {
     data:''
    }   
  },
  mounted() {
    this.data = cityData
  },
  methods: {
    change(data){
    },
    done(data){ 
    }
  },
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
#div1{
  animation:mymove 2s infinite 
}
@keyframes mymove
{
from {margin-top:0px;}
to {margin-top:200px;}
}
</style>

(注:数据来源为city-data.json)

(2)三级联动效果图

3.二级联动

(1)Html部分代码:

<div class="main-content" v-cloak>
			<div class="home">
           <multilevel @done="done" @change="change" :data="data" :column="'2'"></multilevel>
		  
			<yd-button style="margin: 0rem;" bgcolor="#2F6CDD" color="#FFF" size="large" @click.native="show1 = true">筛选</yd-button>
			<div class="mescroll">
				<div style="margin-bottom: 0.1rem;">
					<div v-for="(item,index) in btn" v-if="item!=''" style="width: 50%;padding:0rem 0.125rem;display: inline-block;">
						<yd-button size="large" type="warning" @click.native="getdatalist2(index+1)">{{item}}</yd-button>
					</div>
				</div>
				<div style="margin-top: 0.3rem;padding: 0.3125rem 0rem;background-color: white;">
					<div id="myChart1" :style="{width: '100%', height: '350px'}"></div>
				</div>
				 </div>
			</div>

(2)新建一个data.json

[
	{
		"name": "油封",
		"code": "130000",
		"children": [
			{
				"name": "油封一班",
				"code": "130100"
			},
			{
				"name": "油封二班",
				"code": "130200"
			}
		]
	},
	{
		"name": "总装",
		"code": "130000",
		"children": [
			{
				"name": "总装一班",
				"code": "130100"
			},
			{
				"name": "总装二班",
				"code": "130200"
			}
		]
	},
	{
		"name": "6DM缸盖",
		"code": "130000",
		"children": [
			{
				"name": "6DM缸盖一班",
				"code": "130100"
			},
			{
				"name": "6DM缸盖二班",
				"code": "130200"
			},
			{
				"name": "6DM缸盖三班",
				"code": "130100"
			},
			{
				"name": "6DM缸盖四班",
				"code": "130100"
			}
		]
	},
	{
		"name": "6DM缸体",
		"code": "130000",
		"children": [
			{
				"name": "6DM缸体一班",
				"code": "130100"
			},
			{
				"name": "6DM缸体二班",
				"code": "130200"
			},
			{
				"name": "6DM缸体三班",
				"code": "130100"
			},
			{
				"name": "6DM缸体四班",
				"code": "130100"
			}
		]
	},
	{
		"name": "校车",
		"code": "130000",
		"children": [
			{
				"name": "校车一班",
				"code": "130100"
			},
			{
				"name": "校车二班",
				"code": "130200"
			}
		]
	}


]

(3)页面效果