<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>树控件测试</title>
<!-- 引入样式 -->
<script src="//unpkg.com/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</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 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>