Commit 69a10b78f7f820c0e1bbefc36d4b4d2431efaab0
1 parent
05e2dda0
fixed #787
Showing
3 changed files
with
138 additions
and
49 deletions
Show diff stats
examples/routers/tree.vue
| 1 | <template> | 1 | <template> |
| 2 | - <Tree :data="baseData" @on-check-change="handleSelectChange" show-checkbox></Tree> | 2 | + <Tree :data="baseData" show-checkbox @on-check-change="handleChange" ></Tree> |
| 3 | </template> | 3 | </template> |
| 4 | <script> | 4 | <script> |
| 5 | export default { | 5 | export default { |
| @@ -8,55 +8,30 @@ | @@ -8,55 +8,30 @@ | ||
| 8 | bd: [], | 8 | bd: [], |
| 9 | baseData: [ | 9 | baseData: [ |
| 10 | { | 10 | { |
| 11 | + title: 'parent', | ||
| 12 | + id: '1-0', | ||
| 11 | expand: true, | 13 | expand: true, |
| 12 | - title: 'parent 1', | ||
| 13 | - children: [{ | ||
| 14 | - title: 'parent 1-0', | ||
| 15 | - expand: true, | ||
| 16 | -// disabled: true, | ||
| 17 | -// checked: true, | ||
| 18 | - children: [ | ||
| 19 | - { | ||
| 20 | - title: 'leaf', | ||
| 21 | - checked: true, | ||
| 22 | - selected: true | ||
| 23 | - }, | ||
| 24 | - { | ||
| 25 | - title: 'leaf', | ||
| 26 | - checked: false | ||
| 27 | - } | ||
| 28 | - ] | ||
| 29 | - }, { | ||
| 30 | - title: 'parent 1-1', | ||
| 31 | - expand: true, | ||
| 32 | - checked: true, | ||
| 33 | - children: [ | ||
| 34 | - { | ||
| 35 | - title: '<span style="color: red">leaf</span>', | ||
| 36 | - checked: false | ||
| 37 | - } | ||
| 38 | - ] | ||
| 39 | - }] | ||
| 40 | - }, | ||
| 41 | - { | ||
| 42 | - expand: true, | ||
| 43 | - title: 'parent 1', | ||
| 44 | - children: [{ | ||
| 45 | - title: 'parent 1-0', | ||
| 46 | - expand: true, | ||
| 47 | - children: [{ | ||
| 48 | - title: 'leaf' | ||
| 49 | - }, { | ||
| 50 | - title: 'leaf', | ||
| 51 | - }] | ||
| 52 | - }, { | ||
| 53 | - title: 'parent 1-1', | ||
| 54 | - expand: true, | ||
| 55 | - checked: true, | ||
| 56 | - children: [{ | ||
| 57 | - title: '<span style="color: red">leaf</span>', | ||
| 58 | - }] | ||
| 59 | - }] | 14 | + children: [ |
| 15 | + { | ||
| 16 | + title: 'child1', | ||
| 17 | + id: '1-1', | ||
| 18 | + expand: true, | ||
| 19 | + children: [ | ||
| 20 | + { | ||
| 21 | + title: 'child1-1-1', | ||
| 22 | + id: '1-1-1' | ||
| 23 | + }, | ||
| 24 | + { | ||
| 25 | + title: 'child1-1-2', | ||
| 26 | + id: '1-1-2' | ||
| 27 | + } | ||
| 28 | + ] | ||
| 29 | + }, | ||
| 30 | + { | ||
| 31 | + title: 'child2', | ||
| 32 | + id: '1-2' | ||
| 33 | + } | ||
| 34 | + ] | ||
| 60 | } | 35 | } |
| 61 | ] | 36 | ] |
| 62 | } | 37 | } |
| @@ -64,7 +39,18 @@ | @@ -64,7 +39,18 @@ | ||
| 64 | methods: { | 39 | methods: { |
| 65 | handleSelectChange (data) { | 40 | handleSelectChange (data) { |
| 66 | console.log(data); | 41 | console.log(data); |
| 42 | + }, | ||
| 43 | + updateTree (data) { | ||
| 44 | + data[0].children[0].checked = true; | ||
| 45 | +// data[0].children[0].children[0].checked = true; | ||
| 46 | +// data[0].children[0].children[1].checked = true; | ||
| 47 | + }, | ||
| 48 | + handleChange () { | ||
| 49 | + console.log(1) | ||
| 67 | } | 50 | } |
| 51 | + }, | ||
| 52 | + mounted () { | ||
| 53 | + this.updateTree(this.baseData); | ||
| 68 | } | 54 | } |
| 69 | } | 55 | } |
| 70 | </script> | 56 | </script> |
src/components/tree/tree.vue
| @@ -119,6 +119,14 @@ | @@ -119,6 +119,14 @@ | ||
| 119 | this.$on('on-checked', () => { | 119 | this.$on('on-checked', () => { |
| 120 | this.$emit('on-check-change', this.getCheckedNodes()); | 120 | this.$emit('on-check-change', this.getCheckedNodes()); |
| 121 | }); | 121 | }); |
| 122 | + }, | ||
| 123 | + watch: { | ||
| 124 | + data () { | ||
| 125 | + this.$nextTick(() => { | ||
| 126 | + this.updateData(); | ||
| 127 | + this.broadcast('TreeNode', 'indeterminate'); | ||
| 128 | + }) | ||
| 129 | + } | ||
| 122 | } | 130 | } |
| 123 | }; | 131 | }; |
| 124 | </script> | 132 | </script> |
| 125 | \ No newline at end of file | 133 | \ No newline at end of file |
| 1 | +export default { | ||
| 2 | + i: { | ||
| 3 | + select: { | ||
| 4 | + placeholder: '選んでください', | ||
| 5 | + noMatch: 'マッチするデータなし' | ||
| 6 | + }, | ||
| 7 | + table: { | ||
| 8 | + noDataText: 'データなし', | ||
| 9 | + noFilteredDataText: 'スクリーニングしたデータなし', | ||
| 10 | + confirmFilter: 'スクリーニング', | ||
| 11 | + resetFilter: 'リセット', | ||
| 12 | + clearFilter: '全部' | ||
| 13 | + }, | ||
| 14 | + datepicker: { | ||
| 15 | + selectDate: '日時を選んでください', | ||
| 16 | + selectTime: '時間を選んでください', | ||
| 17 | + startTime: 'スタート時間', | ||
| 18 | + endTime: '終了時間', | ||
| 19 | + clear: 'クリーア', | ||
| 20 | + ok: '確定', | ||
| 21 | + month: '月', | ||
| 22 | + month1: '1 月', | ||
| 23 | + month2: '2 月', | ||
| 24 | + month3: '3 月', | ||
| 25 | + month4: '4 月', | ||
| 26 | + month5: '5 月', | ||
| 27 | + month6: '6 月', | ||
| 28 | + month7: '7 月', | ||
| 29 | + month8: '8 月', | ||
| 30 | + month9: '9 月', | ||
| 31 | + month10: '10 月', | ||
| 32 | + month11: '11 月', | ||
| 33 | + month12: '12 月', | ||
| 34 | + year: '年', | ||
| 35 | + weeks: { | ||
| 36 | + sun: '日', | ||
| 37 | + mon: '月', | ||
| 38 | + tue: '火', | ||
| 39 | + wed: '水', | ||
| 40 | + thu: '木', | ||
| 41 | + fri: '金', | ||
| 42 | + sat: '土' | ||
| 43 | + }, | ||
| 44 | + months: { | ||
| 45 | + m1: '1月', | ||
| 46 | + m2: '2月', | ||
| 47 | + m3: '3月', | ||
| 48 | + m4: '4月', | ||
| 49 | + m5: '5月', | ||
| 50 | + m6: '6月', | ||
| 51 | + m7: '7月', | ||
| 52 | + m8: '8月', | ||
| 53 | + m9: '9月', | ||
| 54 | + m10: '10月', | ||
| 55 | + m11: '11月', | ||
| 56 | + m12: '12月' | ||
| 57 | + } | ||
| 58 | + }, | ||
| 59 | + transfer: { | ||
| 60 | + titles: { | ||
| 61 | + source: 'ソースリスト', | ||
| 62 | + target: 'ターゲットリスト' | ||
| 63 | + }, | ||
| 64 | + filterPlaceholder: '検索内容を入力ください', | ||
| 65 | + notFoundText: '内容が見つかってなかった' | ||
| 66 | + }, | ||
| 67 | + modal: { | ||
| 68 | + okText: '確定', | ||
| 69 | + cancelText: 'キャンセル' | ||
| 70 | + }, | ||
| 71 | + poptip: { | ||
| 72 | + okText: '確定', | ||
| 73 | + cancelText: 'キャンセル' | ||
| 74 | + }, | ||
| 75 | + page: { | ||
| 76 | + prev: '前へ', | ||
| 77 | + next: '次へ', | ||
| 78 | + total: '全部', | ||
| 79 | + item: '件', | ||
| 80 | + items: '件', | ||
| 81 | + prev5: '前の５ページへ', | ||
| 82 | + next5: '次の５ページへ', | ||
| 83 | + page: '件/ページ', | ||
| 84 | + goto: '', | ||
| 85 | + p: 'ページ目へ' | ||
| 86 | + }, | ||
| 87 | + rate: { | ||
| 88 | + star: '点', | ||
| 89 | + stars: '点' | ||
| 90 | + }, | ||
| 91 | + tree: { | ||
| 92 | + emptyText: 'データなし' | ||
| 93 | + } | ||
| 94 | + } | ||
| 95 | +}; | ||
| 0 | \ No newline at end of file | 96 | \ No newline at end of file |