el |
您所在的位置：网站首页 › jquery弹框展示树形目录且能多选 › el |
el
|
形式一： 业务需求： 1. 在树形列表中选择项目； 2. 树形列表需带有筛选过滤功能； 3. 将已选择的项目展示在输入框中； 4. 输入框中的选中项可以被单独快速删除； 5. 下拉框中可再次对之前选择过的项目进行重新选择。 实现思路： 1. 所用技术：vue + elementUI组件库； 2. 左侧：使用 el-select 下拉框多选； 右侧：使用 el-popover 弹出框 里面包含了 el-tree 树形列表进行展示。 最终效果： 1. 初始页面展示如下：
2. 点击“蓝色添加按钮”，弹出树形列表：
4. 点击右侧叶子节点进行选择，展示在左侧输入框中：
5. 输入框中的选择项可以直接点击选项后的关闭按钮取消选择，也可在下拉框列表中进行选择：
代码如下： 发送到人：
export default {
data() {
return {
selectOptions: [], // 下拉框选择项列表
selectedId: [], // 下拉框选中值数组（多选）
filterText: '', // 输入框关键字过滤
data: [ // 树形列表展示数据
{
id: 1,
label: '张一',
children: [{
id: 2,
label: '张二',
children: [{
id: 3,
label: '张三'
}, {
id: 4,
label: '张四'
}]
}]
},
{
id: 5,
label: '王一',
children: [{
id: 6,
label: '王二'
}, {
id: 7,
label: '王三'
}]
},
{
id: 8,
label: '李一',
children: [{
id: 9,
label: '李二'
}, {
id: 10,
label: '李三'
}]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
watch: {
// 输入关键字之后，过滤树形列表
filterText(val) {
this.$refs.tree.filter(val);
}
},
created() {
},
methods: {
// 过滤树形列表名称的方法
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 获取当前点击的节点信息
getClickNodes(currentData) {
// 只针对叶子节点，所以有子节点的跳过
if(currentData.children == null) {
// 第一次点击时，直接添加到下拉框的选项列表中 和 选中值中
if(this.selectOptions.length == 0) {
this.selectOptions.push(currentData)
this.selectedId.push(currentData.id)
} else {
// 第二次之后点击时，需判断是否重复（重复元素将不再添加到数组中）
// 下拉选项判重后添加
let num1 = 0;
this.selectOptions.forEach(item => {
item.id == currentData.id ? num1++ : num1;
})
if(num1 == 0) {
this.selectOptions.push(currentData)
}
// 选中值判重后添加
let num2 = 0;
this.selectedId.forEach(item => {
item == currentData.id ? num2++ : num2;
})
if(num2 == 0) {
this.selectedId.push(currentData.id)
}
}
}
}
}
}
.selectTree {
margin-top: 300px;
padding: 30px;
.selectStyle {
width: 500px;
}
.el-icon-circle-plus-outline {
font-size: 32px;
color: cornflowerblue;
position: absolute;
left: 620px;
}
.treeStyle {
.el-popover__reference {
width: 32px;
height: 32px;
position: absolute;
left: 620px;
top: 30px;
}
}
}
.el-popover {
padding: 20px !important;
}
.popContent {
margin-top: 10px;
min-height: 200px;
max-height: 400px;
overflow-y: auto;
}
形式二：
最终效果：
1. 下拉单选：
2. 下拉多选：
最终效果：
组件代码（ el-select-tree.vue ）： ;;{{ data.name }} export default { name: "el-tree-select", props: { // 配置项 props: { type: Object, default: () => { return { value: 'id', children: 'children', label: 'name' } } }, // 选项列表数据(树形结构的对象数组) options: { type: Array, default: () => { return [] } }, // 初始值 value: { type: Object, default: () => { return {} } }, // 可清空选项 clearable: { type: Boolean, default: true }, // 自动收起 accordion: { type: Boolean, default: false } }, data() { return { resultValue: null, valueName: '', defaultExpandedKey: [] } }, watch: { value() { this.resultValue = this.value this.initHandle() } }, mounted() { this.resultValue = this.value.name; // 初始值 this.initHandle(); }, methods: { // 初始化值 initHandle() { if (this.resultValue) { this.valueName = this.resultValue.name; // 初始化显示 this.$refs.selectTree.setCurrentKey(this.resultValue) // 设置默认选中 this.defaultExpandedKey = [this.resultValue] // 设置默认展开 } this.initScroll() }, // 初始化滚动条 initScroll() { this.$nextTick(() => { let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0] let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar') scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;' scrollBar.forEach(ele => ele.style.width = 0) }) }, // 切换选项 handleNodeClick(node) { // 点击叶子节点后被选中 if (node.children == null || node.children == undefined){ this.$refs.selectTree.blur(); this.valueName = node[this.props.label]; this.resultValue = node; this.$emit('getValue', this.resultValue); this.defaultExpandedKey = []; } }, // 清除选中 clearHandle() { this.valueName = '' this.resultValue = null this.defaultExpandedKey = [] this.clearSelected() this.$emit('getValue', null) }, // 清空选中样式 clearSelected() { let allNode = document.querySelectorAll('#tree-option .el-tree-node') allNode.forEach((element) => element.classList.remove('is-current')) } } } .el-scrollbar .el-scrollbar__view .el-select-dropdown__item { height: auto; max-height: 274px; padding: 0; overflow: hidden; overflow-y: auto; } .el-select-dropdown__item.selected { font-weight: normal; } ul li >>> .el-tree .el-tree-node__content { height: auto; padding: 0 20px; } .el-tree-node__label { font-weight: normal; } .el-tree >>> .is-current .el-tree-node__label { color: #409EFF; font-weight: 700; } .el-tree >>> .is-current .el-tree-node__children .el-tree-node__label { color: #606266; font-weight: normal; } .el-popper { z-index: 9999; } .ification_col { width: 20px; height: 10px; display: inline-block; }页面中应用组件（ index.vue ）： 发送到人： import elSelectTree from './el-select-tree.vue' export default { components: { elSelectTree }, data() { return { options: [ { id: 1, name: '张一', children: [{ id: 2, name: '张二', children: [{ id: 3, name: '张三' }, { id: 4, name: '张四' }] }] }, { id: 5, name: '王一', children: [{ id: 6, name: '王二' }, { id: 7, name: '王三' }] }, { id: 8, name: '李一', children: [{ id: 9, name: '李二' }, { id: 10, name: '李三' }] } ] } }, created() { }, methods: { getSelectedValue(value) { console.log('选中的结果值', value) } } } 优化了上面的组件，添加了多选以及默认值显示：
组件代码（ el-select-tree.vue ）： ;;{{ data.name }} export default { name: "el-tree-select", props: { // 配置项 props: { type: Object, default: () => { return { value: 'id', children: 'children', label: 'name' } } }, // 选项列表数据(树形结构的对象数组) options: { type: Array, default: () => { return [] } }, // 初始值（单选） value: { type: Object, default: () => { return {} } }, // 初始值（多选） valueMultiple: { type: Array, default: () => { return [] } }, // 可清空选项 clearable: { type: Boolean, default: true }, // 自动收起 accordion: { type: Boolean, default: false }, // 是否多选 multiple: { type: Boolean, default: false } }, data() { return { resultValue: [], // 传给父组件的数组对象值 valueName: this.multiple ? [] : '' // 输入框显示值 } }, watch: { value() { this.resultValue = this.multiple ? this.valueMultiple : this.value; // 初始值 this.initHandle() } }, mounted() { this.resultValue = this.multiple ? this.valueMultiple : this.value; // 初始值 this.initHandle(); }, methods: { // 初始化显示 initHandle() { if (this.resultValue) { if(this.multiple) { // 多选 this.resultValue.forEach(item => this.valueName.push(item.name)); } else { // 单选 this.valueName = this.resultValue.name; } } this.initScroll() }, // 初始化滚动条 initScroll() { this.$nextTick(() => { let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0] let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar') scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;' scrollBar.forEach(ele => ele.style.width = 0) }) }, // 切换选项 handleNodeClick(node) { // 点击叶子节点后被选中 if (node.children == null || node.children == undefined){ if(this.multiple) { // 多选（判重后添加） let num = 0; this.valueName.forEach(item => { item == node[this.props.label] ? num++ : num; }) if(num == 0) { this.valueName.push(node[this.props.label]); // 输入框显示值 this.resultValue.push(node); } } else { // 单选 this.$refs.selectTree.blur(); this.valueName = node[this.props.label]; this.resultValue = node; } this.$emit('getValue', this.resultValue); } }, // 从输入框中直接删除某个值时 changeValue(val) { if(this.multiple) { // 多选（同时删掉传给父组件中多余的值，再传给父组件） this.resultValue.map((item, index) => { let i = val.indexOf(item.name) if(i == -1) { this.resultValue.splice(index, 1) } }) this.$emit('getValue', this.resultValue); } else { // 单选 this.$emit('getValue', val); } }, // 清除选中 clearHandle() { this.valueName = this.multiple ? [] : '' this.resultValue = [] this.clearSelected() this.$emit('getValue', this.resultValue) }, // 清空选中样式 clearSelected() { let allNode = document.querySelectorAll('#tree-option .el-tree-node') allNode.forEach((element) => element.classList.remove('is-current')) } } } .el-scrollbar .el-scrollbar__view .el-select-dropdown__item { height: auto; max-height: 300px; padding: 0; overflow: hidden; overflow-y: auto; } .el-select-dropdown__item.selected { font-weight: normal; } ul li >>> .el-tree .el-tree-node__content { height: auto; padding: 0 20px; } .el-tree-node__label { font-weight: normal; } .el-tree >>> .is-current .el-tree-node__label { color: #409EFF; font-weight: 700; } .el-tree >>> .is-current .el-tree-node__children .el-tree-node__label { color: #606266; font-weight: normal; } .el-popper { z-index: 9999; } .ification_col { width: 20px; height: 10px; display: inline-block; }页面中应用组件（ index.vue ）： 发送到人： import elSelectTree from './el-select-tree.vue' export default { components: { elSelectTree }, data() { return { multiple: true, value: { id: 3, name: '张三' }, valueMultiple: [ { id: 3, name: '张三' }, { id: 4, name: '张四' } ], options: [ { id: 1, name: '张一', children: [{ id: 2, name: '张二', children: [{ id: 3, name: '张三' }, { id: 4, name: '张四' }] }] }, { id: 5, name: '王一', children: [{ id: 6, name: '王二' }, { id: 7, name: '王三' }] }, { id: 8, name: '李一', children: [{ id: 9, name: '李二' }, { id: 10, name: '李三' }] } ] } }, created() { }, methods: { // 组件传出来的选中结果 getSelectedValue(value) { console.log('选中的结果值', value) } } }原文链接：https://blog.csdn.net/keke11211/article/details/120313802 |
3. 输入关键字可直接进行筛选查询：
【本文地址】
今日新闻 |
推荐新闻 |