显示效果
vue+elementui实现下拉多选，全选，反选，清空功能
实例代码
页面内引用
组件：
<el-select v-model="orgData" size="small" multiple collapse-tags> <div class="select_up"> <el-button type="text" v-on:click="selectAll"> <i class="jw jw-quanxuan " /> 全选</el-button> <el-button type="text" v-on:click="removeTag"> <i class="jw jw-qingkong " /> 清空</el-button> <el-button type="text" v-on:click="selectReverse"> <i class="jw jw-fanxuan " /> 反选</el-button> </div> <div class="select_list"> <el-option v-for="item in webAddresses" :key="item.orgId" :label="item.orgName" :value="item.orgId" /> </div> </el-select>
js
export default { data() { return { webAddresses: [{ orgId: '1', orgName: '全选1' }, { orgId: '2', orgName: '全选2' }, { orgId: '3', orgName: '全选2' }, { orgId: '4', orgName: '全选2' }, { orgId: '5', orgName: '全选2' }, { orgId: '6', orgName: '全选2' }, { orgId: '7', orgName: '全选2' }, { orgId: '8', orgName: '全选2' }, { orgId: '9', orgName: '全选2' } ],// 遍历的select option 从后端遍历 orgData: [],//选中数据 } }, methods: { removeTag() { this.orgData = [] }, selectAll(val) { val = [] this.webAddresses.map(item => { val.push(item.orgId) }) this.orgData = val }, selectReverse(val) { val = [] this.webAddresses.map(item => { let index = this.orgData.indexOf(item.orgId); console.log(index) if (index != -1) { //orgData.splice(index, 1) } else { val.push(item.orgId) } }) this.orgData = val } } }
css
.el-select-dropdown__list { height: 100%; overflow: hidden; } .select_up { padding: 0 12px; font-size: 14px; position: absolute; z-index: 99999; background-color: white; top: 0px; width: 100%; border-radius: 5px 5px 0 0; ::v-deep .el-button { color: #bcbcbc; font-size: 14px; i { font-size: 14px; } } ::v-deep .el-button:hover { color: #409EFF; } .el-button+.el-button { margin-left: 6px; } } .select_list { margin-top: 25px; }
完整组件
<template> <div> <el-select v-model="orgData" size="small" multiple collapse-tags> <div class="select_up"> <el-button type="text" v-on:click="selectAll"> <i class="jw jw-quanxuan " /> 全选</el-button> <el-button type="text" v-on:click="removeTag"> <i class="jw jw-qingkong " /> 清空</el-button> <el-button type="text" v-on:click="selectReverse"> <i class="jw jw-fanxuan " /> 反选</el-button> </div> <div class="select_list"> <el-option v-for="item in webAddresses" :key="item.orgId" :label="item.orgName" :value="item.orgId" /> </div> </el-select> </div> </template> <script> export default { data() { return { webAddresses: [{ orgId: '1', orgName: '全选1' }, { orgId: '2', orgName: '全选2' }, { orgId: '3', orgName: '全选2' }, { orgId: '4', orgName: '全选2' }, { orgId: '5', orgName: '全选2' }, { orgId: '6', orgName: '全选2' }, { orgId: '7', orgName: '全选2' }, { orgId: '8', orgName: '全选2' }, { orgId: '9', orgName: '全选2' } ],// 遍历的select option 从后端遍历 orgData: [],//选中数据 } }, methods: { //清空操作 removeTag() { this.orgData = [] }, //全选操作 selectAll(val) { val = [] this.webAddresses.map(item => { val.push(item.orgId) }) this.orgData = val }, //反选操作 selectReverse(val) { val = [] this.webAddresses.map(item => { let index = this.orgData.indexOf(item.orgId); //判断现有选中数据是否包含如果不包含则进行反选数据 if (index != -1) { } else { val.push(item.orgId) } }) this.orgData = val } } } </script> <style scoped lang="scss"> .el-select-dropdown__list { height: 100%; overflow: hidden; } .select_up { padding: 0 12px; font-size: 14px; position: absolute; z-index: 99999; background-color: white; top: 0px; width: 100%; border-radius: 5px 5px 0 0; ::v-deep .el-button { color: #bcbcbc; font-size: 14px; i { font-size: 14px; } } ::v-deep .el-button:hover { color: #409EFF; } .el-button+.el-button { margin-left: 6px; } } .select_list { margin-top: 25px; } </style>
