基於vue.js 2.0，不使用webpack的nodejs服務，只在瀏覽器上單獨使用在Element UI的Tree樹形控制元件
阿新 • • 發佈：2019-02-08
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