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

Tree add check-directly prop

Browse source
This commit is contained in:
梁灏 2019-02-27 10:22:01 +08:00
parent 98221c87b6
commit 467e2cf9a4
3 changed files with 21 additions and 211 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

208
examples/routers/tree.vue
View file

@ -1,215 +1,11 @@
<!--<template>-->
<!--<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 {-->
<!--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: '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>-->
<!--<template>-->
<!--<div style="width: 400px;">-->
<!--<Tree :data="data4" :render="renderContent"></Tree>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--data4: [-->
<!--{-->
<!--title: 'parent 1',-->
<!--expand: true,-->
<!--children: [-->
<!--{-->
<!--title: 'parent 1-1',-->
<!--expand: true,-->
<!--children: [-->
<!--{-->
<!--title: 'leaf 1-1-1',-->
<!--expand: true-->
<!--},-->
<!--{-->
<!--title: 'leaf 1-1-2',-->
<!--expand: true-->
<!--}-->
<!--]-->
<!--},-->
<!--{-->
<!--title: 'parent 1-2',-->
<!--expand: true,-->
<!--children: [-->
<!--{-->
<!--title: 'leaf 1-2-1',-->
<!--expand: true-->
<!--},-->
<!--{-->
<!--title: 'leaf 1-2-1',-->
<!--expand: true-->
<!--}-->
<!--]-->
<!--}-->
<!--]-->
<!--}-->
<!--],-->
<!--buttonProps: {-->
<!--type: 'ghost',-->
<!--size: 'small',-->
<!--}-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--renderContent (h, { data, node, root }) {-->
<!--return h('span', {-->
<!--style: {-->
<!--display: 'inline-block',-->
<!--width: '100%'-->
<!--}-->
<!--}, [-->
<!--h('span', data.title),-->
<!--h('span', {-->
<!--style: {-->
<!--display: 'inline-block',-->
<!--float: 'right',-->
<!--marginRight: '32px'-->
<!--}-->
<!--}, [-->
<!--h('Button', {-->
<!--props: Object.assign({}, this.buttonProps, {-->
<!--icon: 'ios-plus-empty'-->
<!--}),-->
<!--style: {-->
<!--marginRight: '8px'-->
<!--},-->
<!--on: {-->
<!--click: () => { this.append(data) }-->
<!--}-->
<!--}),-->
<!--h('Button', {-->
<!--props: Object.assign({}, this.buttonProps, {-->
<!--icon: 'ios-minus-empty'-->
<!--}),-->
<!--on: {-->
<!--click: () => { this.remove(node, data, root) }-->
<!--}-->
<!--})-->
<!--])-->
<!--]);-->
<!--},-->
<!--append (data) {-->
<!--this.$set(data, 'children', [{-->
<!--title: 'appended node',-->
<!--expand: true-->
<!--}]);-->
<!--},-->
<!--remove (node, data, root) {-->
<!--const parentKey = root.find(el => el === node).parent;-->
<!--const parent = root.find(el => el.nodeKey === parentKey).node;-->
<!--const index = parent.children.indexOf(data);-->
<!--parent.children.splice(index, 1);-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template> <template>
<div> <Tree :data="data2" check-directly show-checkbox></Tree>
{{ data1 }}
<Tree :data="data1"></Tree>
</div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
data1: [ data2: [
{ {
title: 'parent 1', title: 'parent 1',
expand: true, expand: true,

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

@ -41,6 +41,7 @@
export default { export default {
name: 'TreeNode', name: 'TreeNode',
mixins: [ Emitter ], mixins: [ Emitter ],
inject: ['TreeInstance'],
components: { Checkbox, Icon, CollapseTransition, Render }, components: { Checkbox, Icon, CollapseTransition, Render },
props: { props: {
data: { data: {
@ -156,7 +157,11 @@
}, },
handleSelect () { handleSelect () {
if (this.data.disabled) return; if (this.data.disabled) return;
this.dispatch('Tree', 'on-selected', this.data.nodeKey); if (this.TreeInstance.showCheckbox && this.TreeInstance.checkDirectly) {
this.handleCheck();
} else {
this.dispatch('Tree', 'on-selected', this.data.nodeKey);
}
}, },
handleCheck () { handleCheck () {
if (this.data.disabled) return; if (this.data.disabled) return;

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

@ -23,6 +23,9 @@
name: 'Tree', name: 'Tree',
mixins: [ Emitter, Locale ], mixins: [ Emitter, Locale ],
components: { TreeNode }, components: { TreeNode },
provide () {
return { TreeInstance: this };
},
props: { props: {
data: { data: {
type: Array, type: Array,
@ -38,9 +41,14 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
checkStrictly:{ checkStrictly: {
type:Boolean, type: Boolean,
default:false default: false
},
// 当开启 showCheckbox 时，如果开启 checkDirectly，select 将强制转为 check 事件
checkDirectly: {
type: Boolean,
default: false
}, },
emptyText: { emptyText: {
type: String type: String
@ -54,7 +62,8 @@
}, },
render: { render: {
type: Function type: Function
} },
}, },
data () { data () {
return { return {