多选版本
<template>
<div class="app-container" style="padding: 0">
<el-select
ref="selectTree"
v-model="treeName"
style="width: 260px"
class="main-select-tree"
placeholder="请选择设备名称"
multiple
collapse-tags
clearable
@clear="clearSelectInput"
>
<el-option
v-for="(item, index) in formatData(treeData)"
:key="index"
:label="item.name"
:value="item.value"
style="display: none"
/>
<el-tree
ref="selecteltree"
class="main-select-el-tree"
:data="treeData"
show-checkbox
node-key="id"
:props="defaultProps"
@check-change="handleNodeClick"
/>
</el-select>
</div>
</template>
<script>
export default {
props: {
selectValue: {
type: String,
default: ''
}
},
data() {
return {
// 绑定 传递的值
treeId: [],
treeName: [],
// 树 数据
treeData: [
{
id: 'GG',
name: '灌溉设备',
order: 1,
parentId: '-1',
children: [
{
id: 'WZGG000001',
name: '1#机井灌溉三相水泵',
order: 1,
parentId: 'GG'
}
]
}
],
defaultProps: {
children: 'children',
label: 'name'
}
}
},
watch: {
filterText(val) {
this.$refs.selecteltree.filter(val)
}
},
mounted() {
},
methods: {
// 递归遍历数据
formatData(data) {
let options = []
const formatDataRecursive = (data) => {
data.forEach((item) => {
options.push({ label: item.name, value: item.id })
if (item.children && item.children.length > 0) {
formatDataRecursive(item.children)
}
})
}
formatDataRecursive(data)
// console.log('递归遍历数据', options)
return options
},
// 点击事件
handleNodeClick(data, check) {
if (!data.children) {
if (check) {
this.treeId.push(data.id)
this.treeName.push(data.name)
} else {
this.treeId = this.treeId.filter(function(value) {
return value !== data.id
})
this.treeName = this.treeName.filter(function(value) {
return value !== data.name
})
}
} else {
data.children.map((item) => {
if (check) {
this.treeId.push(item.id)
this.treeName.push(item.name)
} else {
this.treeId = this.treeId.filter(function(value) {
return value !== item.id
})
this.treeName = this.treeName.filter(function(value) {
return value !== item.name
})
}
})
}
this.treeId = [...new Set(this.treeId)]
this.treeName = [...new Set(this.treeName)]
// // this.$refs.selectTree.blur()
this.$emit('update:selectValue', this.treeId)
},
// 清空事件
clearSelectInput() {
this.$emit('update:selectValue', [])
// 获取 el-tree 实例的引用
const elTree = this.$refs.selecteltree
elTree.setCheckedKeys([])
}
}
}
</script>
<style lang="scss" scoped>
.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {
font-weight: bold;
color: #409eff;
}
.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {
font-weight: bold;
color: #409eff;
}
::v-deep .el-tag.el-tag--info .el-tag__close {
display: none;
}
</style>
// 父组件中使用
<TreeSelectZdy
v-model="queryParams.deviceCode"
@update:selectValue="handleSelectValueChange"
/>
handleSelectValueChange(value) {
// console.log('点击选择 ...', value)
let getValue = []
if (value && value.length > 0) {
getValue = value
} else {
getValue = []
}
this.queryParams.deviceCode = getValue.toString()
},
单选版本
<template>
<div class="app-container" style="padding: 0">
<el-select
ref="selectTree"
v-model="treeName"
style="width: 200px"
class="main-select-tree"
placeholder="请选择设备名称"
clearable
@clear="clearSelectInput"
>
<el-option
v-for="(item, index) in formatData(treeData)"
:key="index"
:label="item.name"
:value="item.value"
style="display: none"
/>
<el-tree
ref="selecteltree"
class="main-select-el-tree"
:data="treeData"
highlight-current
node-key="id"
:props="defaultProps"
@node-click="handleNodeClick"
/>
</el-select>
</div>
</template>
<script>
import comApis from '@/api/commonApi/commonApi.js'
export default {
props: {
selectValue: {
type: String,
default: ''
},
deviceName: {
type: String,
default: ''
},
deviceCode: {
type: String,
default: ''
},
treeSelectIndex: {
type: Number,
default: 0
}
},
data() {
return {
// 绑定 传递的值
treeId: '',
treeName: '',
// 树 数据
treeData: [
{
id: 'GG',
name: '灌溉设备',
order: 1,
parentId: '-1',
children: [
{
id: 'WZGG000001',
name: '1#机井灌溉三相水泵',
order: 1,
parentId: 'GG'
}
]
}
],
defaultProps: {
children: 'children',
label: 'name'
}
}
},
watch: {
filterText(val) {
this.$refs.selecteltree.filter(val)
},
deviceName: {
immediate: true, // 不管更不更新, 都会执行一次
deep: true,
handler: function(newV, oldV) {
this.treeName = newV
}
},
deviceCode: {
immediate: true, // 不管更不更新, 都会执行一次
deep: true,
handler: function(newV, oldV) {
this.treeId = newV
}
}
},
mounted() {
},
methods: {// 递归遍历数据
formatData(data) {
let options = []
const formatDataRecursive = (data) => {
data.forEach((item) => {
options.push({ label: item.name, value: item.id })
if (item.children && item.children.length > 0) {
formatDataRecursive(item.children)
}
})
}
formatDataRecursive(data)
// console.log('递归遍历数据', options)
return options
},
// 点击事件
handleNodeClick(data, check) {
console.log('1233', data)
if (!data.children && data.parentId !== '-1') {
this.treeId = data.id
this.treeName = data.name
this.$refs.selectTree.blur()
this.$emit('update:selectValue', this.treeId, this.treeSelectIndex)
}
},
// 清空事件
clearSelectInput() {
this.$emit('update:selectValue', undefined, this.treeSelectIndex)
// 获取 el-tree 实例的引用
const elTree = this.$refs.selecteltree
elTree.setCurrentKey(null)
}
}
}
</script>
<style lang="scss" scoped>
.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {
font-weight: bold;
color: #409eff;
}
.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {
font-weight: bold;
color: #409eff;
}
</style>