溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關element-ui tree如何實現自定義增刪改查功能，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
首先是頁面部分
<template> <el-tree id="userMtree" ref="tree" :data="treeData" node-key="id" :render-content="renderContent" :expand-on-click-node="false" @node-click="nodeClick" :default-expanded-keys='expandedKey' ></el-tree> </template>
下面是js部分
export default {
props:['treeDataObj','isUserMgt'],//父級傳值 與判斷哪個tree
data () {
return {
treeData:[],//tree數據
expandedKey:[],//展開節點
checkedID:''//選中節點
}
},
mounted(){
this.treeData=this.treeDataObj.treeData
let userMtree=document.getElementById('userMtree')
this.$nextTick(()=>{
userMtree.firstElementChild.classList.add("is-current");//添加選中類名
})
this.checkedID=this.treeData[0].id//默認選中第一個
},
methods:{
//編輯
nodeEdit(ev, store, data) {
data.isEdit = true;
this.$nextTick(() => {//得到input
const $input =
ev.target.parentNode.parentNode.querySelector("input") ||
ev.target.parentElement.parentElement.querySelector("input");
!$input ? "" : $input.focus();//獲取焦點
});
},
//失焦事件
edit_sure(ev, data) {
const $input =
ev.target.parentNode.parentNode.querySelector("input") ||
ev.target.parentElement.parentElement.querySelector("input");
if (!$input) {
return false;
} else if($input.value==''){
this.$message({
type: "info",
message: "內容不能為空!"
});
}else{//賦值value
data.label = $input.value;
data.isEdit = false;
}
},
//react方法 插入代碼
renderContent(h, { node, data, store }) {
return (
<span class="custom-tree-node">
<span class="tree_node_label">{this.showOrEdit(data)}</span>
<div class="tree_node_op">
<i class="el-icon-edit" on-click={ev => this.nodeEdit(ev, store, data)}/>
<i class="el-icon-remove-outline"
on-click={() => this.nodeDelete(node, data)}/>
{
this.isUserMgt?<i class="el-icon-circle-plus-outline"
on-click={() => this.append( data)}></i>:''
}
</div>
</span>
);
},
showOrEdit(data) {
if (data.isEdit) {
return (
<input type="text" class="node_labe" value={data.label}
on-blur={ev => this.edit_sure(ev, data)} />
);
} else {
return <span class="node_labe">{data.label}</span>;
}
},
//新增節點
append(data) {
const newChild = { id: new Date().getTime(), label: '', children: [],
isEdit: true };
//判斷是否有子節點
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
this.expandedKey=[data]//展開點擊節點
},
//移除節點
nodeDelete(node, data) {
const parent = node.parent
const children = parent.data.children || parent.data
const index = children.findIndex(d => d.id === data.id)
children.splice(index, 1)
},
//點擊節點 移除默認選中節點
nodeClick(data){
let userMtree=document.getElementById('userMtree')
userMtree.firstElementChild.classList.remove("is-current");
this.checkedID=data.id
console.log(data)
this.$emit('emitClickNode',data)
}
}
}補充知識：vue前端基礎之組件封裝（樹組件的封裝附帶增刪改查方法）
組件封裝的意義
組件封裝的意義其實很好理解，對于一段復用性極高的代碼，就需要進行組件封裝以減少冗余代碼。
樹的封裝
<template>
<el-aside width="180px">
<h4 class="el-icon-folder" >
{{ name }}
</h4>
<el-tree
ref="tree"
:data="setTree"
:props="defaultProps"
node-key="id"
accordion
@node-contextmenu="rihgtClick"
>
<span slot-scope="{ node, data }" class="span-ellipsis">
<span v-show="!node.isEdit">
<span v-show="data.children && data.children.length >= 1">
<span :title="node.label">{{ node.label }}</span>
</span>
<span v-show="!data.children || data.children.length == 0">
<span :title="node.label"> {{ node.label }}</span>
</span>
</span>
</span>
</el-tree>
<!--鼠標右鍵點擊出現頁面-->
<div v-show="menuVisible">
<el-menu
id="rightClickMenu"
class="el-menu-vertical"
text-color="#000000"
active-text-color="#000000"
@select="handleRightSelect"
>
<el-menu-item index="1" :hidden="showQuery" class="menuItem">
<span slot="title">查詢</span>
</el-menu-item>
<el-menu-item index="2" :hidden="showSave" class="menuItem">
<span slot="title">添加</span>
</el-menu-item>
<el-menu-item index="3" :hidden="showUpdate" class="menuItem">
<span slot="title">修改</span>
</el-menu-item>
<el-menu-item index="4" :hidden="showDelete" class="menuItem">
<span slot="title">刪除</span>
</el-menu-item>
</el-menu>
</div>
</el-aside>
</template>
<script>
export default {
name: 'Tree',
props: {
treeData: {
type: Array,
required: true
},
treeName: {
type: String,
required: true,
default: '樹'
},
isHiddenQuery: {
type: Boolean,
required: false,
default: true
},
isHiddenSave: {
type: Boolean,
required: false,
default: false
},
isHiddenUpdate: {
type: Boolean,
required: false,
default: false
},
isHiddenDelete: {
type: Boolean,
required: false,
default: false
}
},
data() {
return {
setTree: this.treeData,
showQuery: this.isHiddenQuery,
showSave: this.isHiddenSave,
showUpdate: this.isHiddenUpdate,
showDelete: this.isHiddenDelete,
name: this.treeName,
TREEDATA: {
DATA: null,
NODE: null
},
isLoadingTree: true, // 是否加載節點樹
objectID: null,
defaultProps: {
children: 'children',
label: 'name'
},
menuVisible: this.menuVisible
}
},
watch: {
treeData(val) {
this.setTree = val
},
treeName(val) {
this.name = val
}
},
methods: {
handleRightSelect(key) {
if (key === '1') {
this.$emit('NodeQuery', this.TREEDATA)
this.menuVisible = false
} else if (key === '2') {
this.$emit('NodeAdd', this.TREEDATA)
this.menuVisible = false
} else if (key === '3') {
this.$emit('NodeUpdate', this.TREEDATA)
this.menuVisible = false
} else if (key === '4') {
this.$emit('NodeDel', this.TREEDATA)
this.menuVisible = false
}
},
rihgtClick(event, object, value, element) {
if (this.objectID !== object.id) {
this.objectID = object.id
this.menuVisible = true
this.TREEDATA.DATA = object
this.TREEDATA.NODE = value
} else {
this.menuVisible = !this.menuVisible
}
document.addEventListener('click', e => {
this.menuVisible = false
})
const menu = document.querySelector('#rightClickMenu')
/* 菜單定位基于鼠標點擊位置 */
menu.style.left = event.clientX - 180 + 'px'
menu.style.top = event.clientY - 100 + 'px'
menu.style.position = 'absolute' // 為新創建的DIV指定絕對定位
menu.style.width = 120 + 'px'
}
}
}
</script>
<style lang="scss" scoped>
.span-ellipsis {
width: 100%;
overflow: hidden;
margin-left: 10px;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>對于組件的引用
import tree from '@/components/Tree/index'
export default {
components: { tree },
data() {}
......組件的使用
<tree :tree-data="setTree" :tree-name="treeName" @NodeAdd="NodeAdd" @NodeUpdate="NodeUpdate" @NodeDel="NodeDel" />
setTree是要給樹賦予的值，treeName是樹的標題（可不要），后面是需要的樹的右鍵操作我啟用了增刪改
效果圖
子組件向父組件傳值
handleRightSelect(key) {
if (key === '1') {
this.$emit('NodeQuery', this.TREEDATA)
this.menuVisible = false
} else if (key === '2') {
this.$emit('NodeAdd', this.TREEDATA)
this.menuVisible = false
} else if (key === '3') {
this.$emit('NodeUpdate', this.TREEDATA)
this.menuVisible = false
} else if (key === '4') {
this.$emit('NodeDel', this.TREEDATA)
this.menuVisible = false
}
}上述就是小編為大家分享的element-ui tree如何實現自定義增刪改查功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
