使用Element-UI中的el-cascader 实现可以任意选择一项，以及点击选中后下拉框自动收起

最新推荐文章于 2023-12-28 11:05:39 发布

卿637

最新推荐文章于 2023-12-28 11:05:39 发布

阅读量2.2k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qp1101/article/details/126389532

版权

本文介绍了如何在 Vue.js 应用中使用 Element UI 的级联选择器组件（el-cascader）。通过设置 `checkStrictly`、`expandTrigger` 和 `emitPath` 属性实现特定交互效果，并自定义模板以优化展示。同时，展示了如何监听选择器值的变化，以及在选择时触发的方法 `cascaderClick`，该方法用于更新模型值并关闭下拉菜单。

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

//<template>中定义的样式       
            <el-cascader
              :options="powerRegionNew"  //数据结构
              :props="{ checkStrictly: true, expandTrigger:'hover',emitPath: false}"
              ref="elcascader"
              v-model="zzmc"
              :show-all-levels="false"
            >
              <template slot-scope="{ node, data }">
                <div @click="cascaderClick(data)">
                  <span>{{ data.label }}</span>
                  <span v-if="!node.isLeaf">({{ data.children.length }})</span>
                </div>
              </template>
            </el-cascader>





 data() {
    return {
      powerRegionNew: [],//后端接口返回的数据，结构看下
    //powerRegionNew:[ { "label": "广东", "value": "440000", "children": [{ "label": "广州", 
                       "value": "440100" }, { "label": "深圳", "value": "440300" }] },
                       { "label": "宁夏", "value": "640000", "children": [{ "label": "银川", 
                       "value": "640100" }] }
      zzmc: undefined,
     }


//设置监听选择器值变化的时候，把 dropDownVisible 属性设置为 false 即可。
watch:{
      zzmc(){
          if (this.$refs.elcascader) {
          this.$refs.elcascader.dropDownVisible = false;
      }
         }

}


//任意选择（父级也可）
methods: {
    cascaderClick(nodeData) {
      this.zzmc = nodeData.label;
      //如果你需要传字段给接口用（nodeData.label），如果你需要传编码（nodeData.value）
      this.$refs.cascader.checkedValue = nodeData.value;
      this.$refs.cascader.computePresentText();
      this.$refs.cascader.toggleDropDownVisible(false);
    },
}