drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Tree Render function use

Browse source
This commit is contained in:
梁灏 2017-10-25 16:45:42 +08:00
parent 3ea2461551
commit 174836c4ef
4 changed files with 104 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

183
examples/routers/tree.vue
View file

@ -1,135 +1,94 @@
<!--<template>-->
<!--<div>-->
<!--<Tree :data="baseData" :load-data="loadData" multiple></Tree>-->
<!--<Button @click="handleAdd">add</Button>-->
<!--<Button @click="handleUpdate">update</Button>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--baseData: [-->
<!--{-->
<!--expand: true,-->
<!--title: 'parent 1',-->
<!--children: [-->
<!--{-->
<!--title: 'parent 1-0',-->
<!--expand: false,-->
<!--children: [],-->
<!--loading: false-->
<!--},-->
<!--{-->
<!--title: 'parent 1-1',-->
<!--expand: true,-->
<!--checked: true,-->
<!--children: [-->
<!--{-->
<!--title: '<span style="color: red">leaf</span>',-->
<!--render: (h) => {-->
<!--return h('Button', {-->
<!--props: {-->
<!--type: 'primary',-->
<!--size: 'small'-->
<!--},-->
<!--on: {-->
<!--click: ({target}) => {-->
<!--this.logger(target.textContent);-->
<!--}-->
<!--}-->
<!--}, 'I\'m a button!');-->
<!--}-->
<!--}-->
<!--]-->
<!--}-->
<!--]-->
<!--}-->
<!--]-->
<!--};-->
<!--},-->
<!--methods: {-->
<!--handleAdd () {-->
<!--this.baseData.push(-->
<!--{-->
<!--title: 'test name',-->
<!--checked: true-->
<!--}-->
<!--);-->
<!--},-->
<!--handleUpdate () {-->
<!--const child = this.baseData[0].children[0].children[1];-->
<!--// console.log(JSON.stringify(this.baseData), '\n', JSON.stringify(child));-->
<!--if (!child) return this.$Message.error('Node is async and is not loaded yet');-->
<!--else this.$set(child, 'checked', true);-->
<!--},-->
<!--logger (txt) {-->
<!--console.log(txt);-->
<!--},-->
<!--loadData (item, callback) {-->
<!--setTimeout(() => {-->
<!--callback([-->
<!--{-->
<!--title: 'children-1',-->
<!--// loading: false,-->
<!--children: []-->
<!--},-->
<!--{-->
<!--title: 'children-2',-->
<!--// loading: false,-->
<!--children: []-->
<!--}-->
<!--]);-->
<!--}, 2000);-->
<!--}-->
<!--}-->
<!--};-->
<!--</script>-->
<template>
<Tree :data="data3" show-checkbox multiple></Tree>
<div>
<Tree :data="baseData" :load-data="loadData" multiple :render="renderFunc"></Tree>
<Button @click="handleAdd">add</Button>
<Button @click="handleUpdate">update</Button>
</div>
</template>
<script>
export default {
data () {
return {
data3: [
baseData: [
{
title: 'parent 1',
expand: true,
selected: true,
title: 'parent 1',
children: [
{
title: 'parent 1-0',
expand: false,
children: [],
loading: false
},
{
title: 'parent 1-1',
expand: true,
disabled: true,
checked: true,
children: [
{
title: 'leaf 1-1-1',
disabled: true
},
{
title: 'leaf 1-1-2'
}
]
},
{
title: 'parent 1-2',
expand: true,
children: [
{
title: 'leaf 1-2-1',
checked: true
},
{
title: 'leaf 1-2-1'
title: 'leaf',
render: (h, { node }) => {
return h('Button', {
props: {
type: 'primary',
size: 'small'
},
on: {
click: ({target}) => {
this.logger(target.textContent);
}
}
}, node.title + '000');
}
}
]
}
]
}
]
};
},
methods: {
handleAdd () {
this.baseData.push(
{
title: 'test name',
checked: true
}
);
},
handleUpdate () {
const child = this.baseData[0].children[0].children[1];
// console.log(JSON.stringify(this.baseData), '\n', JSON.stringify(child));
if (!child) return this.$Message.error('Node is async and is not loaded yet');
else this.$set(child, 'checked', true);
},
logger (txt) {
console.log(txt);
},
loadData (item, callback) {
setTimeout(() => {
callback([
{
title: 'children-1',
// loading: false,
children: []
},
{
title: 'children-2',
// loading: false,
children: []
}
]);
}, 2000);
},
renderFunc (h, { node }) {
return h('Button', {
props: {
type: 'ghost'
}
}, node.title)
}
}
}
};
</script>