15
Mar.2021
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 来设置父子节点取消选中关联,从而达到选择任意一级选项的目的。
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 来设置父子节点取消选中关联,从而达到选择任意一级选项的目的。
