vue el-cascader 动态加载（三级分类或省市区）

最新推荐文章于 2025-05-06 14:08:36 发布

小山羊~

最新推荐文章于 2025-05-06 14:08:36 发布

阅读量3.2k

点赞数 1

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_21747731/article/details/105217781

版权

vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用el-cascader组件实现动态加载三级分类，例如省市区选择。通过在template中设置配置，data中定义初始数据，以及在script的methods中编写加载逻辑，实现按需加载数据，提高应用性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.tempalte中：

    <el-dialog
        width="600px"
        title="商品类目编辑"
        :visible.sync="dialogVisible">
        <el-cascader
          v-model="partyOrganId"
          :props="{
            value: 'id',
            label: 'name',
            children: 'cities'
          }"
          :options="cascaderData"
          :show-all-levels="false"
          @change="handleChange"
          @active-item-change="handleItemChange"
          filterable
        ></el-cascader>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="categoryEdit">确 定</el-button>
        </span>
      </el-dialog>

2.data中：

  partyOrganId: [],
  cascaderData: [],

3.在编辑入口
  this.getNodes()

4. script中（methods）：

    handleChange (value) {
      this.partyOrganId = value
    },
    handleItemChange (val) {
      console.log(val, 'ggggggg')
      this.getNodes(val)
    },
    getNodes(val) {
      let idArea
      let sizeArea
      if (!val) {
        idArea = null
        sizeArea = 0
      } else if (val.length === 1) {
        idArea = val[0]
        sizeArea = val.length
      } else if (val.length === 2) {
        idArea = val[1]
        sizeArea = val.length
      }
      getproductcategory({
        id: idArea,
        shop_id: this.ssid
      }).then(res => {
        if (res.status === 200) {
          this.ones = res.data
          if (sizeArea === 0) {
            this.cascaderData = this.ones.map((value, i) => {
              return {
                id: value.id,
                name: value.name,
                cities: []
              }
            })
          } else if (sizeArea === 1) {
            this.cascaderData.map((value, i) => {
              if (value.id === val[0]) {     // 遍历数据源=选中
                if (!value.cities.length) {  //value.cities不存在时
                  value.cities = this.ones.map((value, i) => {
                    return {
                      id: value.id,
                      name: value.name,
                      cities: []
                    }
                  })
                }
              }
            })
          } else if(sizeArea === 2) {
            this.cascaderData.map((value, i) => {
              if (value.id === val[0]) {
                value.cities.map((value, i) => {
                  if (value.id === val[1]) {
                    if (!value.cities.length) {
                      value.cities = this.ones.map((value, i) => {
                        return {
                          id: value.id,
                          name: value.name
                        }
                      })
                    }
                  }
                })
              }
            })
          }
        }
      })
    },