vue中实现下拉菜单单选，多选，查询选中
vue中实现下来菜单单选，多选，查询选中
1.展示效果
代码展示：
<template>
<el-dialog
title="帮助"
:visible.sync="dialogVisible"
width="40%"
customClass="flowHelp"
>
<div>
<!-- 下拉有多选功能 还能输入搜索 -->
<el-dropdown trigger="click" @visible-change="onVisibleChange" class="dropdown">
<span class="el-dropdown-link">
<div class="menu_text"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></div>
</span>
<el-dropdown-menu slot="dropdown" :hide-on-click="false">
<div class="drop">
<div style="width: 100%">
<el-input
v-model="input"
@input="inputEvent"
class="input"
size="mini"
prefix-icon="el-icon-search"
placeholder="搜索"
clearable
style="width: 100%"
>
</el-input>
</div>
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
class="checkAlls"
>
全选
</el-checkbox>
<div class="checkAllLine"></div>
<el-checkbox-group
v-model="isCheckIdList"
v-if="checkboxLists.length > 0"
@change="handleCheckedChange"
>
<div class="checkboxLists">
<el-checkbox
v-for="item in checkboxLists"
:label="item[keys]"
:key="item[keys]"
style="display: block"
class="checiboxItem"
>
{{ item.label }}
</el-checkbox>
</div>
</el-checkbox-group>
<div v-if="checkboxLists.length === 0" class="noData">无数据</div>
<div class="footer">
<el-button type="primary" plain size="mini" class="footer_close" @click="onVisibleChange">
关 闭
</el-button>
<el-button type="primary" size="mini" class="footer_sure" @click="determine">
确 定
</el-button>
</div>
</div>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-dialog>
</template>
<script>
export default {
data () {
return {
dialogVisible: false,
input: '',
state2: '',
checkAll: false,
isCheckIdList: [], // 选中的
isIndeterminate: false,
checkboxLists: [],
initList: [], // initList: [{ id: "1", label: "张三11", age: 5 }, { id: "2", label: "李四", age: 6 },],
initIsCheckId: [] // 初始化id列表
}
},
props: {
keys: {
type: String,
default: 'id' // 模拟数据 唯一值 是id
},
checkBoxList: {
type: Array,
default: () => [
// 模拟数据 从父组件传进来的数据格式
{ id: '1', label: '张三', age: 5 },
{ id: '2', label: '李四', age: 6 },
{ id: '3', label: '王五', age: 7 },
{ id: '4', label: '赵六 ', age: 8 },
{ id: '5', label: '小英', age: 9 },
{ id: '6', label: '王麻子', age: 10 },
{ id: '7', label: '王小二', age: 11 },
{ id: '8', label: '老王', age: 12 },
{ id: '9', label: '小李', age: 13 },
{ id: '10', label: '李四', age: 6 },
{ id: '11', label: '王五', age: 7 },
{ id: '12', label: '赵六 ', age: 8 },
{ id: '13', label: '小英', age: 9 },
{ id: '14', label: '王麻子', age: 10 },
{ id: '15', label: '王小二', age: 11 },
{ id: '16', label: '老王', age: 12 },
{ id: '17', label: '小李', age: 13 },
{ id: '18', label: '李四', age: 6 },
{ id: '19', label: '王五', age: 7 },
{ id: '20', label: '赵六 ', age: 8 }
]
},
defaultCheckBoxList: {
type: Array,
default: () => ['3', '4', '5'] // 模拟数据 默认选中的id列表 default: () => ['3', '4', '5']
}
},
components: {},
mounted () {
this.init1()
},
methods: {
init () {
this.dialogVisible = true
},
init1 () {
let { defaultCheckBoxList = [], checkBoxList = [] } = this
this.initList = checkBoxList
this.checkboxLists = this.deepClone(checkBoxList) // 深拷贝一下
if (defaultCheckBoxList.length === 0) return
let arr = this.getIdList()
this.initIsCheckId = this.deepClone(arr)
this.isCheckIdList = arr
this.defaultCheckAllStatus()
// 默认选中 end
},
// 提取id列表
getIdList () {
let { defaultCheckBoxList, keys = 'id' } = this
// 默认选中 start
let item = defaultCheckBoxList[0]
console.log('默认选中的id', item)
let types = Object.prototype.toString.call(item)
let arr = []
// 传的是id字符串
if (types === '[object String]') arr = defaultCheckBoxList
// 传的是数组对象包含id
if (types === '[object Object]') arr = defaultCheckBoxList.map((x) => x[keys] + '')
// 传的是id数字
if (types === '[object Number]') arr = defaultCheckBoxList.map((x) => x + '')
console.log('arrarrarrarr', arr)
return arr
},
// 确定
determine () {
console.log('提交的数据isCheckIdList', this.isCheckIdList)
let { keys, isCheckIdList, checkBoxList, initIsCheckId } = this
let isCheckEdItem = checkBoxList.filter((x) => isCheckIdList.includes(x[keys]))
let initList = this.deepClone(this.initList)
let obj = {
initList, // 原始数组值
initIsCheckId, // 原始id列表值
isCheckIdList, // 选中的id列表值
isCheckEdItem // 选中的itemList值
}
console.log('obj', obj)
this.$emit('checked', obj) // 把选中的信息抛出
},
onVisibleChange (v) {
console.log('是否展示：', v)
if (!v) {
// 关闭后
let initArId = this.initIsCheckId.sort().toString()
let isCheckIdList = this.isCheckIdList.sort().toString()
console.log('关闭dropdown,前后选项是否相同：', initArId === isCheckIdList)
if (initArId === isCheckIdList) return // 选中的值相同 可不请求
this.determine()
}
},
// 输入事件
inputEvent (val = '') {
val = (val + '').toLowerCase()
let arr = []
if (val === '') {
// 输入为空 把原始数组赋值
let ars = this.deepClone(this.initList)
this.checkboxLists = ars
} else {
// 有输入的内容 提取和输入的内容 匹配列表的label 相关内容
arr = this.checkboxLists.filter((x) => x.label.includes(val))
this.checkboxLists = arr
}
this.defaultCheckAllStatus()
},
// 默认全选状态
defaultCheckAllStatus () {
// 选中的和原始值长度一样 全选
this.checkAll = this.isCheckIdList.length === this.initList.length
// 选中的大于0 并且小于原始数组长度，半选状态
this.isIndeterminate =
this.isCheckIdList.length > 0 && this.isCheckIdList.length < this.initList.length
},
// 点击全选
handleCheckAllChange (val) {
let { keys, checkboxLists } = this
let idList = checkboxLists.map((x) => x[keys])
this.isCheckIdList = val ? idList : []
this.isIndeterminate = false
//
this.$emit('isCheckEdfn', { isCheckIdList: this.isCheckIdList })
},
// 点击 某一项
handleCheckedChange (value) {
let checkedCount = value.length
this.checkAll = checkedCount === this.checkboxLists.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkboxLists.length
},
// 深拷贝
deepClone (source) {
// console.log('sourcesourcesourcesource', source)
if (typeof source !== 'object' || source == null) {
return source
}
const target = Array.isArray(source) ? [] : {}
for (const key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
if (typeof source[key] === 'object' && source[key] !== null) {
target[key] = this.deepClone(source[key])
} else {
target[key] = source[key]
}
}
}
// console.log('targettargettargettarget:::', target)
return target
}
}
}
</script>
<style>
.flowHelp {
height: 30%;
}
</style>
<style>
.dropdown {
cursor: pointer;
}
.drop {
padding: 10px;
}
/* 设置宽度 */
/* .menu_text {
width: 200px;
height: 30px;
background-color: aqua;
} */
.input {
width: 100px;
margin: 0 auto;
width: 100%;
}
.checkAlls {
margin-top: 5px;
padding-bottom: 5px;
display: block;
}
.checkAllLine {
width: 75%;
border-bottom: 1px solid #e4e4e4;
margin: 0 auto;
}
.checkboxLists {
max-height: 260px;
padding-right: 10px;
overflow-y: scroll;
}
.checiboxItem {
margin: 3px 0;
}
.noData {
margin: 20px 0;
font-size: 14px;
color: #ccc;
width: 100%;
text-align: center;
}
.footer {
margin-top: 15px;
width: 100%;
text-align: center;
}
.footer_sure {
margin-left: 20px;
}
</style>