CZO_Boss/src/views/stock/goods/index.vue

<template>
	<div class="goods">
		<el-row :gutter="20">
			<el-col :span="4" :xs="24">
				<div class="cate">
					<el-input placeholder="输入分类名称搜索" v-model="filterText" style="margin-bottom: 20px"></el-input>
					<el-tree :data="cateList" node-key="id" default-expand-all :highlight-current="true" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree">
						<span class="custom-tree-node" slot-scope="{ data }">
							<span @click="cateClick(data)">{{ data.name }}</span>
							<span style="margin-left: 20px" v-if="false">
								<el-button type="text" size="mini" @click="() => addCate(data)">添加</el-button>
								<el-button type="text" size="mini" @click="() => updCate(data)">修改</el-button>
								<el-button type="text" size="mini" @click="() => delCate(data)">删除</el-button>
							</span>
						</span>
					</el-tree>
				</div>
			</el-col>
			<el-col :span="20" :xs="24"> </el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: 'Goods',
		data() {
			return {
				cateData: [
					{ id: 1, name: '电子设备', pid: 0 },
					{ id: 2, name: '食品', pid: 0 },
					{ id: 3, name: '服装', pid: 0 },
					{ id: 4, name: '鞋子', pid: 0 },
					{ id: 5, name: '手机', pid: 1 },
					{ id: 6, name: '电脑', pid: 1 },
					{ id: 7, name: '照相机', pid: 1 },
					{ id: 8, name: '水果', pid: 2 },
					{ id: 9, name: '熟食', pid: 2 },
					{ id: 10, name: '零食', pid: 2 },
					{ id: 11, name: '饮料', pid: 2 },
					{ id: 12, name: '外套', pid: 3 },
					{ id: 13, name: '上衣', pid: 3 },
					{ id: 14, name: '裤子', pid: 3 },
					{ id: 15, name: '衬衫', pid: 3 },
					{ id: 16, name: '毛衣', pid: 3 },
					{ id: 17, name: '休闲鞋', pid: 4 },
					{ id: 18, name: '篮球鞋', pid: 4 },
					{ id: 19, name: '滑板鞋', pid: 4 },
					{ id: 20, name: '高跟鞋', pid: 4 }
				],
				filterText: ''
			}
		},
		computed: {
			cateList() {
				return this.handleTree(this.cateData, 'id', 'pid')
			}
		},
		methods: {
			filterNode() {}
		},
		components: {}
	}
</script>

<style scoped lang="scss">
	.goods {
		.cate {
			padding: 10px;
		}
	}
</style>