Blame view

src/components/tree2/tree.vue 3.56 KB
75c32d5f   梁灏   rebuild Tree
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
  <template>
      <div :class="prefixCls">
          <Tree-node
              v-for="item in currentData"
              :key="item"
              :data="item"
              visible
              :multiple="multiple"
              :show-checkbox="showCheckbox">
          </Tree-node>
      </div>
  </template>
  <script>
      import TreeNode from './node.vue';
      import { findComponentsDownward } from '../../utils/assist';
      import Emitter from '../../mixins/emitter';
      import { t } from '../../locale';
  
      const prefixCls = 'ivu-tree';
  
      export default {
          name: 'Tree',
          mixins: [ Emitter ],
          components: { TreeNode },
          props: {
              data: {
                  type: Array,
                  default () {
                      return [];
                  }
              },
              multiple: {
                  type: Boolean,
                  default: false
              },
              showCheckbox: {
                  type: Boolean,
                  default: false
              },
              emptyText: {
                  type: String,
                  default () {
                      return t('i.tree.emptyText');
                  }
              }
          },
          data () {
              return {
                  prefixCls: prefixCls,
                  currentData: this.data
              };
          },
          watch: {
              data (val) {
                  
              }
          },
          methods: {
              getSelectedNodes () {
                  const nodes = findComponentsDownward(this, 'TreeNode');
                  return nodes.filter(node => node.data.selected).map(node => node.data);
              },
              updateData () {
                  // init checked status
                  function reverseChecked(data) {
                      if (data.children) {
                          let checkedLength = 0;
                          data.children.forEach(node => {
                              if (node.children) node = reverseChecked(node);
                              if (node.checked) checkedLength++;
                          });
  //                        data.checked = checkedLength >= data.children.length;
                          if (checkedLength >= data.children.length) data.checked = true;
                          return data;
                      } else {
                          return data;
                      }
                  }
                  
                  function forwardChecked(data) {
                      if (data.children) {
                          data.children.forEach(node => {
                              if (data.checked) node.checked = true;
                              if (node.children) node = forwardChecked(node);
                          });
                          return data;
                      } else {
                          return data;
                      }
                  }
                  this.currentData = this.data.map(node => reverseChecked(node)).map(node => forwardChecked(node));
                  this.broadcast('TreeNode', 'indeterminate');
              }
          },
          mounted () {
              this.updateData();
  
              this.$on('selected', ori => {
                  const nodes = findComponentsDownward(this, 'TreeNode');
                  nodes.forEach(node => {
                      this.$set(node.data, 'selected', false);
                  });
                  this.$set(ori, 'selected', true);
              });
              this.$on('on-selected', () => {
                  this.$emit('on-select-change', this.getSelectedNodes());
              });
              this.$on('checked', () => {
                  this.updateData();
              });
          }
      };
  </script>