Tree add check-directly prop
This commit is contained in:
梁灏
parent
98221c87b6
commit
467e2cf9a4
3 changed files with 21 additions and 211 deletions
|
|
@ -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>
|
||||
<div>
|
||||
{{ data1 }}
|
||||
<Tree :data="data1"></Tree>
|
||||
</div>
|
||||
<Tree :data="data2" check-directly show-checkbox></Tree>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data1: [
|
||||
data2: [
|
||||
{
|
||||
title: 'parent 1',
|
||||
expand: true,
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
export default {
|
||||
name: 'TreeNode',
|
||||
mixins: [ Emitter ],
|
||||
inject: ['TreeInstance'],
|
||||
components: { Checkbox, Icon, CollapseTransition, Render },
|
||||
props: {
|
||||
data: {
|
||||
|
|
@ -156,7 +157,11 @@
|
|||
},
|
||||
handleSelect () {
|
||||
if (this.data.disabled) return;
|
||||
if (this.TreeInstance.showCheckbox && this.TreeInstance.checkDirectly) {
|
||||
this.handleCheck();
|
||||
} else {
|
||||
this.dispatch('Tree', 'on-selected', this.data.nodeKey);
|
||||
}
|
||||
},
|
||||
handleCheck () {
|
||||
if (this.data.disabled) return;
|
||||
|
|
|
|||
|
|
@ -23,6 +23,9 @@
|
|||
name: 'Tree',
|
||||
mixins: [ Emitter, Locale ],
|
||||
components: { TreeNode },
|
||||
provide () {
|
||||
return { TreeInstance: this };
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
|
|
@ -42,6 +45,11 @@
|
|||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 当开启 showCheckbox 时，如果开启 checkDirectly，select 将强制转为 check 事件
|
||||
checkDirectly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
emptyText: {
|
||||
type: String
|
||||
},
|
||||
|
|
@ -54,7 +62,8 @@
|
|||
},
|
||||
render: {
|
||||
type: Function
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue