vue+element 後臺管理系統（三）樹形圖
阿新 • • 發佈：2018-12-18
vue+element 後臺管理系統，沒有依賴vue-cli，是經典的web模式。
<!DOCTYPE html> <html class="over_hidd"> <head> <meta charset="UTF-8"> <title>vue+element後臺系統"</title> <meta name="Author" content="Lee"> <meta name="Keywords" content="vue+element後臺系統"> <link rel="stylesheet" href="css/public.css" /> <link rel="stylesheet" href="css/element.css" /> </head> <body class="over_hidd"> <div id="app"> <el-tree :data="data2" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps"> </el-tree> </div> </body> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript" src="js/element.js" ></script> <script> new Vue({ el: '#app', 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' } }; } }) </script> </html>