el-cascader级联选择器多选用法

<div class="block">
  <span class="demonstration">hover 触发子菜单</span>
  <el-cascader
    :disabled="disabledSelect"
    :multiple="true"
    v-model="value"
    :options="gsmcs"
    :show-all-levels="false"
     ref="cityNameTree"
    :props="optionProps"
    @change="handleChange"></el-cascader>
</div>
//注释 :multiple="true"是否可多选
//注释 :show-all-levels="false" 可以仅在输入框中显示选中项最后一级的标签,而不是选中项所在的完整路径。
<script>
  export default {
    data() {
      return {
        value: [],
        ssdwlists: "",
        disabledSelect: false, //是否禁用
        gsmcs: [], //获取的数据列表
        optionProps: {
            value: "orgId",
            label: "orgName",
            children: "orgList",
            multiple: true,  //实现可以多选多个叶子节点
            checkStrictly:true, //选择任意一级选项:在单选模式下,你只能选择叶子节点;而在多选模式下,勾选父节点真正选中的都是叶子节点。启用该功能后,可让父子节点取消关联,选择任意一级选项。
            expandTrigger:'hover', //触碰选项可展示出子选项,无需点击
        },

      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
        if(!value.length) {
            this.ssdwlists = "";
        }else {
           let ssdwListData = this.$refs["cityNameTree"].getCheckedNodes();
           this.ssdwlists = ssdwListData.map((e) => e.value).join(",")
        }

      },
    //获取数据
    getData() {
        .....
        this.gsmcs = res.data
    //res.data数据展示:data:[
    //  0: {
   //       orgId: "010101",
   //       orgName: "组织名称1",
   //       orgList: [
   //          { orgId:"0808",orgName: "子组织名称1"},
   //          { orgId:"0809",orgName: "子组织名称3"},
   //          { orgId:"0800",orgName: "子组织名称3"}
    //      ]
    //    }
    //  ]
    }
    }
  };
</script>

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值