示意图;
怎么完成树形结构的增删改查呢?
假设第一层的数据是,水果,蔬菜,肉类等。
第二层的数据算: 芒果.苹果,哈蜜瓜,青菜,白菜,猪肉,鸡肉等,也就是他们对应的字表。
复习下树形结构的使用
<template>
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>
<script>
export default {
data() {
return {
data: [{
label: '水果',
children: [{
label: '芒果',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '蔬菜',
children: [{
label: '青菜',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '白菜',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '肉类',
children: [{
label: '猪肉',
children: [{
label: '黑猪'
}]
}, {
label: '鸡肉',
children: [{
label: '母鸡'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
};
</script>
<style scoped>
</style>
对应绑定的选定的字段,label表示显示的,children表示他们的儿子,可以进行修改。
点击当前项,能够获取当前项的数据。
直接进行删除即可。