van-cascader异步加载数据

古迪红尘

已于 2023-06-07 22:50:43 修改

阅读量1k

点赞数

分类专栏： vant 文章标签： html5

于 2023-06-07 22:48:56 首次发布

本文链接：https://blog.csdn.net/weixin_57246351/article/details/131097655

版权

vant 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇文章展示了如何在Vue.js应用中使用van-cascader组件创建一个级联选择器，用于选取地区。当选择完成时，它触发finish事件，更新选定区域的ID和名称。同时，文章提及了如何动态从接口获取数据并更新选项列表。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<template>
  <div>
    <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="areaShow = false" @finish="onFinish" :field-names="fieldNames" @change="onChangeArea" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      areaShow: false,
      cascaderValue: '',
      fieldNames: {
        text: 'name',
        value: 'id',
        children: 'children'
      },
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [],
      divisionIds: '', // 地区的id
      divisionNames: '' // 地区的名字
    }
  },
  methods: {
    // 级联数据全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.divisionNames = selectedOptions.map(option => option.name).join('/')
      this.divisionIds = selectedOptions.map(option => option.id).join(',')
      this.areaShow = false
    },
    // 从接口请求获取第一层的数据，---比如北京
    async getAreaList() {
      const id = ''
      const res = await getAreaList(id)
      res.data.forEach(item => {
        this.options.push({
          name: item.name,
          id: item.id,
          children: item.children || null// 这个很关键
        })
      })
    },
    onChangeArea({ value, selectedOptions, tabIndex }) {
      // 需要后台接口返回children数据
      // 拿到数据后，动态添加
      getAreaList(value).then(res => {
      	// 第一种方案
        this.addTree(selectedOptions, res.data, value)
      })
    },
    addTree(selectedOptions, children, id) {
      selectedOptions.forEach(item => {
        if (item.id === id) {
          item.children = children
        }
      })
    }
  }

}
</script>

<style>

</style>