基于vue.js 2.0，不使用webpack的nodejs服务，只在浏览器上单独使用在Element UI的Tree树形控件

来源：互联网发布：gba游戏编程编辑：程序博客网时间：2024/06/05 04:44

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

3 0