DatePicker 日期选择器/日期范围选择器 带快捷选项
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 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。
