All files / vue-cascader/src App.vue

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
 <div id="app">
  <Cascader :options.sync="options" v-model="value" :lazyload="lazyload"></Cascader>
  <Hello></Hello>
 </div>
</template>
<script>
import dataList from './data.json';
import Cascader from './components/Cascader';
import Hello from './components/Hello'
const fetchData = pid => new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(dataList.filter(item => item.pid == pid));
  }, 1000);
});
 
export default {
  methods: {
    async lazyload(id, callback) {
      const children = await fetchData(id);
      callback(children);
    },
    //   async change(value) {
    //       let lastItem = value[value.length-1];
    //       let id = lastItem.id;
    //       let children = await fetchData(id);
    //       this.$set(lastItem,'children',children)
    //   }
  },
  async mounted() {
    const data = await fetchData(0);
    this.options = data;
  },
  data() {
    return {
      value: [],
      options: [],
    };
  },
  components: {
    Cascader,
    Hello
  },
};
</script>