sideCategory 类别选择器组件

背景

小程序视频模块需要使用到左右两侧选择数据模式，由此封装类别选择器组件

使用

<template>
	<view>
		<side-category
			id="id"
			:categoryList="tendersList"
			:subCategoryList="workPointList"
			:mainKey.sync="selectedId"
			:subKey.sync="selectedSubId"
			@categoryMainClick="getWorkPoints"
			@categoryClickSub="clickSub"
		></side-category>
	</view>
</template>
<script>
export default {
	data() {
		return {
			tendersList: [
				{
					id:11,
					name:"JCXSG-1标",
				},
				{
					id:12,
					name:"JCXSG-2标",
				},
				{
					id:13,
					name:"JCXSG-3标",
				},
				{
					id:14,
					name:"JCXSG-4标",
				},
				{
					id:18,
					name:"JCXSG-5标",
				},
				{
					id:19,
					name:"JCXSG-6标",
				},
				{
					id:20,
					name:"JCXSG-7标",
				},
				{
					id:21,
					name:"JCXSG-8标",
				},
				{
					id:22,
					name:"JCXSG-9标",
				},
				{
					id:23,
					name:"JCXSG-10标",
				},
				{
					id:24,
					name:"JCXSG-11标",
				},
				{
					id:25,
					name:"JCXSG-12标",
				},
				{
					id:26,
					name:"JCXSG-13标",
				},
				{
					id:27,
					name:"JCXSG-14标",
				},
				{
					id:28,
					name:"JCXSG-15标",
				},
				{
					id:29,
					name:"JCXSG-16标",
				},
				{
					id:104,
					name:"JCXSG-17标",
				}
			],
			workPointList: [
				{id: 19,  name: "跨沪渝高速公路特大桥",  parentId: 11 },
				{id: 11,  name: "七宝站",  parentId: 11 },
				{id: 21,  name: "姚浜竖河小桥",  parentId: 11 },
				{id: 22,  name: "跨9号线中桥",  parentId: 11 },
				{id: 69,  name: "七华区间路基01",  parentId: 11 },
				{id: 24,  name: "漕宝路小桥",  parentId: 11 }
			],
			selectedId:11,//左侧初始化选中数据ID
			selectedSubId: 19,//右侧初始化选中数据ID
		};
	},
	methods: {
		getWorkPoints(e){
			// 左侧列表点击事件
			console.log(e);
			// 切换右侧数据
			this.workPointList = [
				{id: 70,  name: "七华区间路基02",  parentId: 11 },
				{id: 26,  name: "蒲汇塘中桥",  parentId: 11 },
				{id: 71,  name: "七华区间路基03",  parentId: 11 },
				{id: 28,  name: "U型槽及明挖暗埋段",  parentId: 11 },
				{id: 30,  name: "1#风井",  parentId: 11 },
				{id: 73,  name: "沪杭并行段隔离桩",  parentId: 11 },
				{id: 72,  name: "虹七区间路基",  parentId: 11 },
				{id: 232,  name: "跨沪渝高速特大桥至七宝站区间",  parentId: 11 },
			]
		},
		clickSub(e){
			console.log(e);
		}
	}
};
</script>
<style scoped></style>

参数说明

属性

属性	描述	类型	可选值	默认值
id	用于识别选项。在所有选项中，其值必须唯一	String	——	id
height	组件高度 单位px	Number	——	400
label	用于显示选项	String	——	name
mainKey	左侧结构默认选中选项	Number	——	——
subKey	右侧结构默认选中选项	Number	——	——
categoryList	左侧分类结构数据列表	Array	——	[]
subCategoryList	右侧分类结构数据列表	Array	——	[]
activeTextColor	选中项高亮文字颜色	String	——	#0060C7
activeBackgroundColor	选中项高亮背景颜色	String	——	#fff

事件

事件名称	说明	回调参数
categoryMainClick	左侧选择一个选项后发出	e
categoryClickSub	左侧选择一个选项后发出	e

组件源码及综合示例参考

组件源码 (opens new window)