内容正在载入中,请稍后……
公告
About me
搜索
统计
其他
15 Mar.2021

element-UI的级联选择器如何开启多选模式:el-cascader-multi 不指定

作者: 我就是个世界   分类:技术&学习 » DIV+CSS   出处:本站原创            | |
element-UI的级联选择器如何开启多选模式:el-cascader-multi

el-cascader的props属性增加 multiple: true  即可实现多选功能

<template>
  <div>
          <el-cascader
            ref="cascaderArea"
            v-model="temp.areaIds"
            filterable
            clearable
            show-checkbox
            :show-all-levels="false"
            :options="areaIdsOptions"
            :props="areaIdsProps"
            placeholder="所在区域"
            style="width: 200px;"
            @change="handleChangeArea"
          />
  </div>
</template>
<script>
data() {
    return {
      areaIdsOptions: [],
      areaIdsProps: {
        multiple: true,  // 启用多选功能
        value: 'id',
        label: 'areaName',
        children: 'children'
      },
    }
  }
<script>


部分参数说明:更多参数请参考官方文档
【Cascader Attributes】
filterable:(默认值为 false )将filterable赋值为true即可打开搜索功能,默认会匹配节点的label或所有父节点的label(由show-all-levels决定)中包含输入值的选项。你也可以用filter-method自定义搜索逻辑,接受一个函数,第一个参数是节点node,第二个参数是搜索关键词keyword,通过返回布尔值表示是否命中。
clearable:(默认值为 false )通过 clearable 设置输入框可清空
show-all-levels:(默认值为 true )属性show-all-levels定义了是否显示完整的路径,将其赋值为false则仅显示最后一级

【props参数】
multiple:(默认值为 false )可通过 props.multiple = true 来开启多选模式
checkStrictly:(默认值为 false )可通过 props.checkStrictly = true 来设置父子节点取消选中关联,从而达到选择任意一级选项的目的。 分享到QQ空间
时间:17:02 评论(0) 引用(0) 阅读(160) Tags: ,
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮
OpenID登入 权限选项 表情