基于vue.js 2.0，不使用webpack的nodejs服务，只在浏览器上单独使用在Element UI的Tree树形控件
Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。
Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，它面向企业级的后台应用，能够帮助你快速地搭建网站，极大地减少研发的人力与时间成本。在这个月的 NingJS 上我们开源了这个项目，当时它的文档还没有准备好。今天，经过两周多的完善，
Element UI 的文档正式上线啦！目前它处于 rc 阶段，正式版将于 Vue 2.0 发布后第一时间跟进。 欢迎大家来使用和完善，一起把它做成 Vue 最好的企业级组件库。
Element UI的Tree树形控件官网例子
http://element.eleme.io/#/zh-CN/component/tree
<el-tree
:data="data2"
:props="defaultProps"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent">
</el-tree>
<script>
let id = 1000;
export default {
data() {
return {
data2: [{
id: 1,
label: "一级 1",
children: [{
id: 4,
label: "二级 1-1",
children: [{
id: 9,
label: "三级 1-1-1"
}, {
id: 10,
label: "三级 1-1-2"
}]
}]
}, {
id: 2,
label: "一级 2",
children: [{
id: 5,
label: "二级 2-1"
}, {
id: 6,
label: "二级 2-2"
}]
}, {
id: 3,
label: "一级 3",
children: [{
id: 7,
label: "二级 3-1"
}, {
id: 8,
label: "二级 3-2"
}]
}],
defaultProps: {
children: "children",
label: "label"
}
}
},
methods: {
append(store, data) {
store.append({ id: id++, label: "testtest", children: [] }, data);
},
remove(store, data) {
store.remove(data);
},
renderContent(h, { node, data, store }) {
return (
<span>
<span>
<span>{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
</span>
</span>);
}
}
};
</script>只使用浏览器方式运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>树控件测试</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="/res/css/vue/element-ui-1.2.8.css">
</head>
<body>
<div id="app">
{{ message }}
</div>
<div id="treeView">
<el-tree
:data="data2"
:props="defaultProps"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent">
</el-tree>
</div>
<script src="/res/js/vue/vue-2.2.0.min.js"></script>
<script src="/res/js/vue/element-ui-1.2.8.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
message: "树控件测试"
}
});
var treeView = new Vue({
el: "#treeView",
data: {
baseId:1000,
data2: [{
id: 1,
label: "一级 1",
children: [{
id: 4,
label: "二级 1-1",
children: [{
id: 9,
label: "三级 1-1-1"
}, {
id: 10,
label: "三级 1-1-2"
}]
}]
}, {
id: 2,
label: "一级 2",
children: [{
id: 5,
label: "二级 2-1"
}, {
id: 6,
label: "二级 2-2"
}]
}, {
id: 3,
label: "一级 3",
children: [{
id: 7,
label: "二级 3-1"
}, {
id: 8,
label: "二级 3-2"
}]
}],
defaultProps: {
children: "children",
label: "label"
}
},
methods:{
append:function(store, data) {
store.append({ id: id++, label: "testtest", children: [] }, data);
},
remove:function(store, data) {
store.remove(data);
},
renderContent:function(createElement, { node, data, store }) {
var self = this;
return createElement("span", [
createElement("span", node.label),
createElement("span", {attrs:{
style:"float: right; margin-right: 20px"
}},[
createElement("el-button",{attrs:{
size:"mini"
},on:{
click:function() {
console.info("点击了节点" + data.id + "的添加按钮");
store.append({ id: self.baseId++, label: "testtest", children: [] }, data);
}
}},"添加"),
createElement("el-button",{attrs:{
size:"mini"
},on:{
click:function() {
console.info("点击了节点" + data.id + "的删除按钮");
store.remove(data);
}
}},"删除"),
]),
]);
}
}
})
</script>
</body>
</html>效果
参考Vue的Render函数，使用createElement的方式重新渲染了树的子节点
https://cn.vuejs.org/v2/guide/render-function.html
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
