级联选择器的用法（只能选中第三级列表里面的选项）

@codercjw

已于 2023-02-06 13:51:52 修改

阅读量894

点赞数

分类专栏： # vue后台管理系统文章标签： vue.js 前端 javascript

于 2023-01-12 22:01:16 首次发布

本文链接：https://blog.csdn.net/codercjw/article/details/128663915

版权

vue后台管理系统专栏收录该内容

18 篇文章

订阅专栏

文章讲述了在Vue.js项目中如何通过调用接口获取商品分类数据，将数据填充到级联选择器中，并设置参数确保用户只能选择第三级列表的选项。当选择项变化时，会触发handleChange函数进行验证和处理。

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

1.调接口获取级联选择器里面的参数

   data里面定义：
     // 商品分类列表
      catelist: [],

//调接口获取参数：
created() {
    this.getCateList()
  },
  methods: {
    // 获取所有商品分类数据
    async getCateList() {
      const { data: res } = await this.$http.get('categories')

      if (res.meta.status !== 200) {
        return this.$message.error('获取商品分类数据失败！')
      }

      this.catelist = res.data
      console.log(this.catelist)
    },

2.级联选择器的html结构：

 <el-cascader expand-trigger="hover" :options="catelist" :props="cateProps" v-model="addForm.goods_cat" @change="handleChange"> </el-cascader>

3.级联选择器的参数

 // 级联选择器列表
      catelist: [],
      // 级联选择器参数
      cateProps: {
        label: 'cat_name',
        value: 'cat_id',
        children: 'children',
      },

4.级联选择器里面的一些函数：只能选择第三级列表里面的选项

  // 级联选择器选中项变化，会触发这个函数
    handleChange() {
      console.log(this.addForm.goods_cat)
      // 如果选择的不是第三级列表，
      if (this.addForm.goods_cat.length !== 3) {
        // 就不会有数据出来
        this.addForm.goods_cat = []
      }
    },