drip-public/iview
6
1
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
Show stats 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> <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> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
data3: [ baseData: [
{ {
title: 'parent 1',
expand: true, expand: true,
selected: true, title: 'parent 1',
children: [ children: [
{
title: 'parent 1-0',
expand: false,
children: [],
loading: false
},
{ {
title: 'parent 1-1', title: 'parent 1-1',
expand: true, expand: true,
disabled: true, checked: true,
children: [ children: [
{ {
title: 'leaf 1-1-1', title: 'leaf',
disabled: true render: (h, { node }) => {
}, return h('Button', {
{ props: {
title: 'leaf 1-1-2' type: 'primary',
} size: 'small'
] },
}, on: {
{ click: ({target}) => {
title: 'parent 1-2', this.logger(target.textContent);
expand: true, }
children: [ }
{ }, node.title + '000');
title: 'leaf 1-2-1', }
checked: true
},
{
title: 'leaf 1-2-1'
} }
] ]
} }
] ]
} }
] ]
};
},
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> </script>

22
src/components/tree/node.vue
View file

@ -12,8 +12,9 @@
:indeterminate="data.indeterminate" :indeterminate="data.indeterminate"
:disabled="data.disabled || data.disableCheckbox" :disabled="data.disabled || data.disableCheckbox"
@click.native.prevent="handleCheck"></Checkbox> @click.native.prevent="handleCheck"></Checkbox>
<Render v-if="data.render" :render="data.render"></Render> <Render v-if="data.render" :render="data.render" :node="data"></Render>
<span v-else :class="titleClasses" v-html="data.title" @click="handleSelect"></span> <Render v-else-if="isParentRender" :render="parentRender" :node="data"></Render>
<span v-else :class="titleClasses" @click="handleSelect">{{ data.title }}</span>
<Tree-node <Tree-node
v-if="data.expand" v-if="data.expand"
v-for="(item, i) in data.children" v-for="(item, i) in data.children"
@ -29,7 +30,7 @@
<script> <script>
import Checkbox from '../checkbox/checkbox.vue'; import Checkbox from '../checkbox/checkbox.vue';
import Icon from '../icon/icon.vue'; import Icon from '../icon/icon.vue';
import Render from '../base/render'; import Render from './render';
import CollapseTransition from '../base/collapse-transition'; import CollapseTransition from '../base/collapse-transition';
import Emitter from '../../mixins/emitter'; import Emitter from '../../mixins/emitter';
import { findComponentUpward } from '../../utils/assist'; import { findComponentUpward } from '../../utils/assist';
@ -60,9 +61,6 @@
return { return {
prefixCls: prefixCls prefixCls: prefixCls
}; };
},
watch: {
}, },
computed: { computed: {
classes () { classes () {
@ -99,6 +97,18 @@
}, },
showLoading () { showLoading () {
return 'loading' in this.data && this.data.loading; return 'loading' in this.data && this.data.loading;
},
isParentRender () {
const Tree = findComponentUpward(this, 'Tree');
return Tree && Tree.render;
},
parentRender () {
const Tree = findComponentUpward(this, 'Tree');
if (Tree && Tree.render) {
return Tree.render;
} else {
return null;
}
} }
}, },
methods: { methods: {

14
src/components/tree/render.js Normal file
View file

@ -0,0 +1,14 @@
export default {
name: 'RenderCell',
functional: true,
props: {
render: Function,
node: Object
},
render: (h, ctx) => {
const params = {
node: ctx.props.node
};
return ctx.props.render(h, params);
}
};

3
src/components/tree/tree.vue
View file

@ -42,6 +42,9 @@
}, },
loadData: { loadData: {
type: Function type: Function
},
render: {
type: Function
} }
}, },
data () { data () {