使用vue处理移动端组织结构树

最新推荐文章于 2024-09-14 08:35:36 发布

(σﾟ∀ﾟ)σ..:*☆哎哟不错哦

最新推荐文章于 2024-09-14 08:35:36 发布

阅读量881

点赞数

分类专栏：移动端文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/weixin_47300795/article/details/109675610

版权

移动端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文档展示了如何在Vue移动端应用中利用组件和数据模拟实现类似Web端zTree插件的效果。通过CSS样式设置节点的显示，利用Vue组件`tree-item`递归渲染组织结构数据，实现层级展开与收起功能，并提供了添加子节点和创建新目录的交互操作。示例代码详细介绍了模板、数据处理和事件监听等关键部分。

摘要由CSDN通过智能技术生成

使用vue在移动端做出类似WEB端ztree插件效果:
CSS简单处理：

body {
			  font-family: Menlo, Consolas, monospace;
			  color: #444;
			}
			.item {
			  cursor: pointer;
			}
			.bold {
			  font-weight: bold;
			}
			ul {
			  padding-left: 1em;
			  line-height: 1.5em;
			  list-style-type: dot;
			}

BODY:

<ul id="demo">
			      <tree-item
			        class="item"
			        :item="treeData"
			        @make-folder="makeFolder"
			        @add-item="addItem"
			      ></tree-item>
			    </ul>

引入VUE.JS文件

<script type="text/javascript" src="../../js/vue.js"></script>

<script type="text/x-template" id="item-template">
		      <li>
		        <div
		          :class="{bold: isFolder}"
		          @click="toggle"
		          @dblclick="makeFolder">
		          {{ item.organizationName }}
		          <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
		        </div>
		        <ul v-show="isOpen" v-if="isFolder">
		          <tree-item
		            class="item"
		            v-for="(child, index) in item.children"
		            :key="index"
		            :item="child"
		            @make-folder="$emit('make-folder', $event)"
		            @add-item="$emit('add-item', $event)"
		          ></tree-item>
		          <!-- <li class="add" @click="$emit('add-item', item)">+</li> -->
		        </ul>
		      </li>
		    </script>

模拟数据

var data= [{
					"id": "001",
					"organizationName": "企业",
					"organizationNumber": null,
					"organizationState": 1,
					"organizationType": 1,
					"pName": null,
					"pNumber": null,
					"pid": "0",
					"relationshipStatus": null,
					"remark": null,
					"typeName": null
				},
				{
					"id": "001001",
					"organizationName": "企业1",
					"organizationNumber": null,
					"organizationState": 1,
					"organizationType": 1,
					"pName": "企业",
					"pNumber": null,
					"pid": "001",
					"relationshipStatus": null,
					"remark": null,
					"typeName": null
				},
				{
					"id": "001002",
					"organizationName": "企业001002",
					"organizationNumber": null,
					"organizationState": 1,
					"organizationType": 1,
					"pName": "企业",
					"pNumber": null,
					"pid": "001",
					"relationshipStatus": null,
					"remark": null,
					"typeName": null
				},
				{
					"id": "001003",
					"organizationName": "企业001003",
					"organizationNumber": null,
					"organizationState": 1,
					"organizationType": 1,
					"pName": "企业",
					"pNumber": null,
					"pid": "001",
					"relationshipStatus": null,
					"remark": null,
					"typeName": null
				},
				{
					"id": "001001001",
					"organizationName": "第一项目",
					"organizationNumber": "1",
					"organizationState": 1,
					"organizationType": 2,
					"pName": "廊坊管道研究院",
					"pNumber": null,
					"pid": "001001",
					"relationshipStatus": null,
					"remark": null,
					"typeName": null
				},
				{
					"id": "001001002",
					"organizationName": "第二项目",
					"organizationNumber": "1",
					"organizationState": 1,
					"organizationType": 2,
					"pName": "廊坊管道研究院",
					"pNumber": null,
					"pid": "001001",
					"relationshipStatus": null,
					"remark": null,
					"typeName": null
				},
				{
					"id": "001001001001",
					"organizationName": "第一工程",
					"organizationNumber": "1",
					"organizationState": 1,
					"organizationType": 3,
					"pName": "第一项目",
					"pNumber": "1",
					"pid": "001001001",
					"relationshipStatus": null,
					"remark": null,
					"typeName": null
				},
				{
					"id": "001001001001001",
					"organizationName": "第一公司",
					"organizationNumber": "1",
					"organizationState": 1,
					"organizationType": 3,
					"pName": "第一工程",
					"pNumber": "1",
					"pid": "001001001001",
					"relationshipStatus": null,
					"remark": null,
					"typeName": null
				}
			]

 Vue.component("tree-item", {
			        template: "#item-template",
			        props: {
			          item: Object
			        },
			        data: function() {
			          return {
			            isOpen: false
			          };
			        },
			        computed: {
			          isFolder: function() {
			            return this.item.children && this.item.children.length;
			          }
			        },
			        methods: {
			          toggle: function() {
			            if (this.isFolder) {
			              this.isOpen = !this.isOpen;
			            }
			          },
			          makeFolder: function() {
			            if (!this.isFolder) {
			              this.$emit("make-folder", this.item);
			              this.isOpen = true;
			            }
			          }
			        }
			      });
var vv = new Vue({
				el: '.content',
				data: function() {
					return {
						treeData: {}
					}
				},
				mounted: function() {
					const map = {};
					const val = [];
					array.forEach((item) => {
					    map[item.id] = item;
					});
					array.forEach((item) => {
					    const parent = map[item.pid];
					    if (parent) {
					        (parent.children || (parent.children = [])).push(item);
					    } else {
					        val.push(item);
					    }
					});
					this.treeData=val[0];
					console.log(JSON.stringify(val));
				},
				methods:{
					openChild:function(e,pid){
						console.log(pid);
					},
					makeFolder: function(item) {
					            Vue.set(item, "children", []);
					            this.addItem(item);
					          },
					          addItem: function(item) {
					            item.children.push({
					              name: "new stuff"
					            });
					          }
				}
			})