使用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"
});
}
}
})