Blame view

examples/routers/tree.vue 2.74 KB
89f2ba8b   梁灏   init Tree component
1
  <template>
6ed0cd73   梁灏   update Tree demo
2
      <div>
ecf6c2fa   梁灏   update dependence
3
          <Tree :data="baseData" show-checkbox multiple></Tree>
6ed0cd73   梁灏   update Tree demo
4
5
6
          <Button @click="handleAdd">add</Button>
          <Button @click="handleUpdate">update</Button>
      </div>
89f2ba8b   梁灏   init Tree component
7
8
9
  </template>
  <script>
      export default {
e6c0b158   梁灏   update
10
          data () {
e81207a2   梁灏   update Tree
11
              return {
6ed0cd73   梁灏   update Tree demo
12
                  baseData: [
75c32d5f   梁灏   rebuild Tree
13
                      {
6ed0cd73   梁灏   update Tree demo
14
15
                          expand: true,
                          title: 'parent 1',
69a10b78   梁灏   fixed #787
16
17
                          children: [
                              {
6ed0cd73   梁灏   update Tree demo
18
19
20
                                  title: 'parent 1-0',
                                  expand: true,
                                  disabled: true,
69a10b78   梁灏   fixed #787
21
22
                                  children: [
                                      {
6ed0cd73   梁灏   update Tree demo
23
24
                                          title: 'leaf',
                                          disableCheckbox: true
69a10b78   梁灏   fixed #787
25
26
                                      },
                                      {
6ed0cd73   梁灏   update Tree demo
27
                                          title: 'leaf',
9b24f1ab   梁灏   Tree add Render f...
28
                                          checked: false
69a10b78   梁灏   fixed #787
29
30
                                      }
                                  ]
69a10b78   梁灏   fixed #787
31
32
                              },
                              {
6ed0cd73   梁灏   update Tree demo
33
                                  title: 'parent 1-1',
9b24f1ab   梁灏   Tree add Render f...
34
                                  expand: true,
6ed0cd73   梁灏   update Tree demo
35
36
37
38
                                  checked: true,
                                  children: [
                                      {
                                          title: '<span style="color: red">leaf</span>',
9b24f1ab   梁灏   Tree add Render f...
39
40
41
42
43
44
45
46
47
48
49
50
                                          render: (h) => {
                                              return h('Button', {
                                                  props: {
                                                      type: 'primary'
                                                  },
                                                  on: {
                                                      click: () => {
                                                          this.cc();
                                                      }
                                                  }
                                              }, '我是按钮')
                                          }
6ed0cd73   梁灏   update Tree demo
51
52
                                      }
                                  ]
69a10b78   梁灏   fixed #787
53
54
                              }
                          ]
c8157442   梁灏   fixed #499
55
                      }
75c32d5f   梁灏   rebuild Tree
56
                  ]
e81207a2   梁灏   update Tree
57
              }
9d79a51f   梁灏   update Tree
58
59
          },
          methods: {
6ed0cd73   梁灏   update Tree demo
60
61
62
63
64
65
66
67
68
              handleAdd () {
                  this.baseData.push(
                      {
                          title: 'test name',
                          checked: true
                      }
                  )
              },
              handleUpdate () {
9b24f1ab   梁灏   Tree add Render f...
69
70
71
72
                  this.$set(this.baseData[0].children[0].children[1], 'checked', true);
              },
              cc () {
                  console.log(99)
6ed0cd73   梁灏   update Tree demo
73
              }
e81207a2   梁灏   update Tree
74
75
76
          }
      }
  </script>