初衷，为各使用相关组件的小伙伴写更少的相关代码实现功能，源码在我的被另一篇博文里有，有兴趣的可以去研究，使用过程中有问题的请即时反馈，谢了！qq（微信）591339209，有其他常用到的组件也可以反馈给我，酌情封装！另外要是这个组件还有什么需要优化，或者有哪里使用还不方便的都请反馈一下，留言反馈也没问题。

对你有帮助的话就帮我扫一下支付宝红包呗，不要的扫给我也可以，谢谢了各位，有啥需要可以在下方留言，多金大佬也可以打赏些小费。

需依赖包   better-scroll,

包名：wenlist

使用：yarn add wenlist 

          npm indstall wenlist -s

demo： 

<template>
	<div>
		<w-sortlist v-model="listData" @click="select" children="cities" relkey="core" label="name"></w-sortlist>
	</div>
</template>
<script>
	import listData from '../assets/js/city.js'
	import wSortlist from 'wenlist'
	export default {
		name: 'wSortListDemoVue',
		components: {
			wSortlist
		},
		data () {
			return {
				listData: listData
			}
		},
		methods: {
			select (data) {
				console.log(data, 'data')
			} 
		}
	}
</script>
<style scoped>
	
</style>

 数据格式要求如下，字段名可以不一样，但格式要求一致，请在渲染该组件前自行处理数据，实在处理不了的也可以找我！

 

var cityData = [
	{
	  name: "★热门城市",
	  cities: [
		{
		  name: "北京市",
		  tags: "BEIJING,北京市",
		  cityid: 1
		}
	  ]
	},
	{
	  name: "A",
	  cities: [
		{
		  name: "鞍山市",
		  tags: "ANSHAN,鞍山市",
		  cityid: 64
		}
	  ]
	},
	{
	  name: "B",
	  cities: [
		{
		  name: "北京市",
		  tags: "BEIJING,北京市",
		  cityid: 1
	    }
	  ]
	}
]

属性说明

属性名	类型	描述
v-model	Array	必填，数据源，有格式要求，必须遵守
label	String	需要显示的字段，默认为'name'
children	String	二级数组的字段名称，默认为‘children’
relkey	String	索引字段，默认为‘id’

 

事件说明

事件	参数
click	返回当前点击项的对象