<template> <div> <el-select v-model="selectedOptions" multiple placeholder="请选择" :options="options" collapse-tags ></el-select> <div> 选中的值: {{ selectedOptions }} </div> </div> </template> <script> export defau...
<el-button type="primary" @click="echoData">模拟数据回显</el-button> <el-select placeholder="请选择" v-model="currentValue" multiple collapse-tags @change="selectChange"> <el-option style="height:auto" :value="selectData"> <el-tree :data="studentTreeData" ref="studentTree" node-key=...
给组件添加collapse-tags属性,无法显示的时候它会在后面显示一个+N的标签,告诉用户后面还有多少个,如果只是增加一个+N的标签,对于用户来说不是很明显当前到底选了哪些项,这时你再添加collapse-tags-tooltip属性,你会发现这交互就非常棒了,详见下图:
:clearable="clearable" collapse-tags @visible-change="onVisibleChange" @blur="blur" @focus="focus" > <div v-if="multiple" class="el-select-dropdown__item" @click="onAllClick" @mouseenter="onAllEnter" @mouseleave="hoverAll = false" :class="{ selected: selectedAll, hover: hoverAll }...
el-select 回显操作 <template> <el-select :popper-class-name="popperClassName" v-model="selectedValue" v-loadmore="handleLoadMore" placeholder="请选择" :popper-class="popperClassName" :multiple="!isOnlySingle" collapse-tags reserve-keyword
<el-button type="primary" @click="echoData">模拟数据回显</el-button> <el-select placeholder="请选择" v-model="currentValue" multiple collapse-tags @change="selectChange"> <el-option style="height:auto" :value="selectData"> <el-tree :data="studentTreeData" ref="studentTree" node-key=...
el-option, el-select就是下拉框,所以需要使用 v-model双向绑定数据。...这个时候,我们可以添加 collapse-tags属性,这样子,这样子就只会显示一个选项,没显示的以数量的形式在后面。...再添加 collapse-tags-tooltip属性,还能实现,悬浮在 +X上方时,显示全部选中的选项。...:label="item" :value="item" > i...
既然多选导致表单撑高,那我们有什么方法不让它撑高么,查询了组件文挡,发现了二个可用配置,给组件添加collapse-tags属性,无法显示的时候它会在后面显示一个+N的标签,告诉用户后面还有多少个,如果只是增加一个+N的标签,对于用户来说不是很明显当前到底选了哪些项,这时你再添加collapse-tags-tooltip属性,你会发现这交...
* collapseTags // 多选时将选中值按文字的形式展示 * checkStrictly // 多选时,严格遵循父子不互相关联 * :nodeKey="nodeKey" // 绑定nodeKey,默认绑定'id' * :checkedKeys="defaultCheckedKeys" // 传递默认选中的节点key组成的数组 * @popoverHide="popoverHide"> // 事件有两个参数:第一个是所有选中...