el-cascader回显数据

最新推荐文章于 2024-07-21 19:19:15 发布

半塘潮汐

最新推荐文章于 2024-07-21 19:19:15 发布

阅读量660

点赞数

分类专栏： vue 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_41340792/article/details/126480091

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vue中的级联选择器组件`el-cascader`，包括v-model绑定、选项配置、属性设置如clearable和placeholder，以及在值改变时如何清空和更新选中状态。通过`@change`监听器处理分类选择的变化，并获取最后一项的ID。文章重点在于展示如何在前端实现动态分类选择和数据回显。

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

<el-cascader
   v-model="categoryIds"
   :options="data"
   :props="{value:'name',label:'name',children: 'child'}"
   clearable
   placeholder="请选择分类"
   ref="cateData"
   @change="updateAliCategory"
 ></el-cascader>
  updateAliCategory(val) {
      if (val.length == 0) {
        this.$refs.cateData.$refs.panel.checkedValue = [];
        this.$refs.cateData.$refs.panel.clearCheckedNodes();
        this.$refs.cateData.$refs.panel.activePath = [];
        this.$refs.cateData.$refs.panel.syncActivePath();
      }
      let selectLabel = this.$refs["cateData"].getCheckedNodes();
      selectLabel =
        selectLabel.length == 0 ? "" : selectLabel[0].data.category_id;
     
    },