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>

猜你喜欢

转载自blog.csdn.net/weixin_51747462/article/details/129262537