elementUI树结构添加子级结构
作者：互联网
1.父组件
<template>
<div>
<div
class="filter-input searchinput"
:opendialog="inputValue"
:constractId="fatherId"
>
<el-input
v-model="filterText"
clearable
placeholder="输入名称查找"
size="small"
prefix-icon="el-icon-search"
/>
</div>
<div style="height: 50vh;overflow-y: scroll">
<el-tree
ref="tree"
:data="partOptions"
:filter-node-method="filterNode"
node-key="id"
size="small"
:props="defaultCategory"
:highlight-current="true"
:check-on-click-node="true"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<div class="custom-tree-node-wrapper">
<span class="custom-tree-node-label">
{{ node.label }}
</span>
<span class="operate-btns">
<dot-dropdown
:events="dropMenuEvents"
:data="{node,data}"
@clickNode="addResource"
/>
</span>
</div>
</span>
</el-tree>
<!--新增事件节点分类弹窗-->
<el-dialog
:title="title"
width="450px"
:visible.sync="open"
append-to-body
>
<el-form
ref="addEventForm"
:model="addEventForm"
label-width="80px"
>
<el-form-item label="工程名称" prop="categoryName">
<el-input v-model="addEventForm.partialName" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<form-button
:loading="loading"
:has-submit="type !== 'detail'"
@submit="submitForm"
@cancel="cancel"
/>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import FormButton from '_c/FormButton'
import DotDropdown from '_c/DotDropdown/index'
import { isNotEmpty } from '@/libs/utils'
import { listPartialTree, addProjectPartialFromMeasure, updateProjectPartial } from '@/api/project/base/partial'
export default {
name: 'Index',
components: {
FormButton,
DotDropdown,
listPartialTree
},
props: {
inputValue: {
type: Boolean,
default: false
},
fatherId: {
type: String
}
},
data() {
return {
// 是否显示弹出层
open: false,
//
title: '',
// 确认按钮加载状态
loading: false,
// 表单类型：add:新增 edit:编辑 detail:详情
type: '',
parentId: '',
addEventForm: {},
filterText: '',
partOptions: [],
/* partOptions: [{
id: 1,
parentId:0,
partialName: '一级 1',
children: [{
id: 4,
parentId:1,
partialName: '二级 1-1',
children: [{
id: 9,
parentId:2,
partialName: '三级 1-1-1'
}, {
id: 10,
parentId:2,
partialName: '三级 1-1-2'
}]
}]
}, {
id: 2,
parentId: 0,
partialName: '一级 2',
children: [{
id: 5,
parentId: 1,
partialName: '二级 2-1'
}, {
id: 6,
parentId: 1,
partialName: '二级 2-2'
}]
}
],*/
defaultCategory: {
children: 'children',
label: 'partialName'
},
// sysDropMenuEvents: [{ label: '新增资源', funcName: 'addNode' }],
dropMenuEvents: [
{ label: '新建同级', funcName: 'addPeerNode', type: 'addbrother' },
{ label: '新建子级', funcName: 'addNode', type: 'add' },
{ label: '修改', funcName: 'editNode', type: 'edit' },
{ label: '删除', funcName: 'removeNode', type: 'delete' }
]
}
},
computed: {
},
watch: {
filterText(val) {
this.$refs.tree.filter(val)
},
type(val) {
const title = '工程部位'
switch (val) {
case this.type = 'add':
this.title = `新增${title}`
break
case this.type = 'addbrother':
this.title = `新增${title}`
break
case this.type = 'edit':
this.title = `修改${title}`
break
case this.type = 'delete':
this.title = `删除${title}`
break
}
},
inputValue: {
handler(val) {
if (!val) {
this.filterText = null
}
}
},
fatherId: {
handler(val) {
this.getPartInfo()
},
immediate: true,
deep: true
}
},
created() {
// this.getPartInfo()
},
methods: {
// 过滤显示
filterNode(value, data) {
if (!value) return true
return data.partialName.indexOf(value) !== -1
},
// 打开新增资源弹窗
addResource(type, id, parent) {
this.type = type
// alert(parent)
// this.form.parentId = parent
if (type === 'delete') {
this.$confirm('是否确认删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
} else {
this.show(type, id, parent)
}
},
getPartInfo() {
listPartialTree({
teamId: this.addEventForm.teamId,
projectId: this.addEventForm.projectId,
contractSectId: this.fatherId
}).then(res => {
this.partOptions = res.data
})
},
show(type, id, parentId) {
console.log(type, id, parentId)
this.reset()
// 编辑/详情相关
if (type === 'edit') {
// 获取表单数据
}
this.addEventForm.parentId = parentId
this.addEventForm.id = id
this.open = true
},
/** 提交按钮 */
submitForm() {
this.$refs['addEventForm'].validate(valid => {
if (valid) {
this.loading = true
console.log(this.addEventForm)
if (this.type === 'edit') { // 修改
updateProjectPartial(this.addEventForm).then(res => {
if (res.data) {
this.getPartInfo()
}
}).finally(() => {
this.loading = false
this.open = false
})
} else if (this.type === 'delete') { // 删除
this.loading = false
} else { // 新增子级 or 新增同级
addProjectPartialFromMeasure(this.addEventForm).then(res => {
if (res.data) {
this.getPartInfo()
}
}).finally(() => {
this.loading = false
this.open = false
})
}
}
})
},
/** 取消按钮 */
cancel() {
this.open = false
this.reset()
},
reset() {
this.addEventForm = {
id: undefined,
teamId: this.$store.getters.teamId,
projectId: this.$store.getters.projectId,
contractSectId: this.fatherId,
partialName: undefined,
parentId: undefined,
submitType: this.type
}
}
}
}
</script>
<style lang="scss">
.el-tree-node__content {
position: relative;
.operate-btns {
position: absolute;
right: 2px;
display: none;
}
// 鼠标悬停时，展示
&:hover,
:focus-within {
.operate-btns {
display: inline;
}
}
}
.searchinput {
.el-input__inner,.el-input-group__prepend{
width: calc(100% - 20px);
margin:0 10px;
height: 40px;
border-top:none;
border-width: 0 0 1px;
border-radius:0;
}
.el-input__prefix{
.el-input__icon{
margin-right: 15px;
display: inline-block;
}
font-size:18px;
}
.el-input:focus-within{
.el-icon-search:before {
color: #1890ff;
/*font-weight: bold;*/
}
}
}
</style>
父组件@clickNode="addResource" 接收type，节点id,父级id
// 打开新增资源弹窗
addResource(type, id, parent) {
this.type = type
// alert(parent)
// this.form.parentId = parent
if (type === 'delete') {
this.$confirm('是否确认删除?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
} else {
this.show(type, id, parent)
}
},2.子组件
<template>
<el-dropdown trigger="click" class="custom-tree-menu" size="small">
<i class="el-icon-more rotate " />
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="(item,index) in events"
:key="index"
:divided="index >0"
@click.native="clickMenu(item)"
>
{{ item.label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
name: 'Index',
props: {
events: {
type: Array,
default: function() {
}
},
// 注入数据
data: {
type: Object
}
},
data() {
return {
}
},
methods: {
clickMenu(val) {
this.$emit('clickNode', val.type, this.data.data.id, this.data.data.parentId)
}
}
}
</script>
<style lang="scss">
.el-icon-more:before {
content: "\E794";
color: #1890ff;
font-size: 20px;
}
.rotate {
cursor: pointer;
margin-left: 5px;
transform: rotate(90deg);
}
.rotate:focus {
width: 20px;
height: 20px;
border-radius: 4em;
background-color: rgba(130, 132, 138, 0.2);
}
</style>
搜索框样式
.el-icon-more:before {
content: "\E794";
color: #1890ff;
font-size: 20px;
}
.rotate {
cursor: pointer;
margin-left: 5px;
transform: rotate(90deg);
}
.rotate:focus {
width: 20px;
height: 20px;
border-radius: 4em;
background-color: rgba(130, 132, 138, 0.2);
}标签：addEventForm,elementUI,data,树结构,子级,parentId,title,type,id 来源： https://blog.csdn.net/qq_52685664/article/details/118695803