cascader 动态加载级联数据

最新推荐文章于 2023-04-27 15:04:22 发布

迷途小书童ing

最新推荐文章于 2023-04-27 15:04:22 发布

阅读量251

点赞数 1

本文链接：https://blog.csdn.net/sinat_36017053/article/details/114291392

版权

        <el-cascader v-model="filters.category_id" :clearable='true' :props="categoriesProp" :placeholder="filters.full_path" @change="onCategory" style="width: 300px"></el-cascader>

 categories: [],
      categoriesProp: {
        lazy: true,
        lazyLoad: this.handleCategory,
        emitPath: false
      },
     filters: {
        size: 20,
        page: 1,
        brand_id: '',
        order_by: '',
        order: '',
        search: '',
        category_id: '',
        full_path: '',
        tags: []
      },

 // Lazy load category
    handleCategory(node, resolve) {
      this.categoriesFilter.level = 1
      this.categoriesFilter.parent = node.value

      categoriesEnable(this.categoriesFilter).then(res => {
        if (res.data.code === 200) {
          const nodes = []
          for (const item of res.data.entries) {
            const option = {}
            option.label = item.name
            option.value = item.id
            option.parent = item.parent
            option.children = []
            option.leaf = item.is_leaf
            nodes.push(option)
          }
          resolve(nodes)
        }
      })
    },
    onCategory(e) {
      categoriesEnable(this.categoriesFilter).then(res => {
        if (res.data.code === 200) {
          for (const item of res.data.entries) {
            if (e === item.id) {
              this.filters.full_path = item.full_path
            }
          }
        }
      })
    },