给组件添加collapse-tags属性,无法显示的时候它会在后面显示一个+N的标签,告诉用户后面还有多少个,如果只是增加一个+N的标签,对于用户来说不是很明显当前到底选了哪些项,这时你再添加collapse-tags-tooltip属性,你会发现这交互就非常棒了,详见下图:
🎉 A Vue.js 3 UI Library made by Element team. Contribute to element-plus/element-plus development by creating an account on GitHub.
<el-select style="width: 192px" v-model="form.xxx" clearable filterable multiple collapse-tags collapse-tags-tooltip class="multiple-select" > ... </el-select> .multiple-select { .el-select__selection { flex-wrap: nowrap; } .el-select__selected-item:first-child { max-width: 50%; ....
(1)/src/views/Example/ElSelect/index.vue <template><divclass="index"><el-selectsize="small"placeholder="请选择游戏"value-key="id"style="width: 100%"multiplefilterableclearablecollapse-tags:reserve-keyword="false"collapse-tags-tooltipv-model="gameParam.gameSelectedList"@remove-tag="handleGameItem...
<el-select v-model="mineStatus" ref="searchSelect" :placeholder="placeholder" :multiple="!Single" :size="size":disabled="disabled" collapse-tags @change="selectChange" :loading="loading"> <div style="padding: 10px;"> <el-input v-if="filterable" placeholder="请输入搜索内容" v-model="...
<el-tooltip content="支持多选" placement="top"> <el-form-item> <el-select v-model="form.exam" placeholder="请选择考试" multiple collapse-tags clearable @change="changeExam" > <el-option label="全选" value="全选" @click.native="selectAll(form.exam,exam)">...
el-option, el-select就是下拉框,所以需要使用 v-model双向绑定数据。...这个时候,我们可以添加 collapse-tags属性,这样子,这样子就只会显示一个选项,没显示的以数量的形式在后面。...再添加 collapse-tags-tooltip属性,还能实现,悬浮在 +X上方时,显示全部选中的选项。...:label="item" :value="item" > i...
</el-tooltip> </template> <script> const isEmpty = require('lodash/isEmpty'); export default { name: 'ElTreeSelect', props: { // 配置选项 props: { type: Object, default: function() { return { value: 'value', // 实际值对应的属性 ...
<el-tooltip content="支持多选" placement="top"> <el-form-item> <el-select v-model="form.exam" placeholder="请选择考试" multiple collapse-tags clearable @change="changeExam" > <el-option label="全选" value="全选" @click.native="selectAll(form.exam,exam)">...
既然多选导致表单撑高,那我们有什么方法不让它撑高么,查询了组件文挡,发现了二个可用配置,给组件添加collapse-tags属性,无法显示的时候它会在后面显示一个+N的标签,告诉用户后面还有多少个,如果只是增加一个+N的标签,对于用户来说不是很明显当前到底选了哪些项,这时你再添加collapse-tags-tooltip属性,你会发现这交...