element e e-treeコンポーネントのダイナミックロード、新規、更新ノードの実現
最近は需要に応じて、ツリーコントロールを使う必要があります。eleのパッケージはツリーコントロールを使っています。
正直に言って、私は木の形の構造全体をダイナミックにロードしたいです。ちょうどあります。
需要に合って、ララ
使う時に問題が発生しました。バックグラウンドをどうやって表に戻しますか？料理を出します。
部分
ここでは、e-treeのスタイルを少し変えました。
これは個人によって必要です。
ここはポップアップボックスで情報を管理します。
ダイナミックなバックグラウンドデータの更新とフロント表示の更新を実現し、
その後、より良いバックグラウンドアプリが成功したら、Vue.$set()を通じてサブノードデータを更新する。
正直に言って、私は木の形の構造全体をダイナミックにロードしたいです。ちょうどあります。
需要に合って、ララ
使う時に問題が発生しました。バックグラウンドをどうやって表に戻しますか？料理を出します。
<template>
<el-tree
empty-text=" "
:expand-on-click-node="false"
:props="defaultProps"
:load="loadNode"
node-key="id"
lazy>
<div class="custom-tree-node" slot-scope="{ node, data }">
<div class="fl"><i class="el-icon-menu"></i>{{ node.label }}</div>
<div class="fr">
<el-button
type="primary"
size="mini"
@click="() => addDialogShow(node, data, 0)">
</el-button>
<el-button
type="primary"
plain
size="mini"
@click="() => addDialogShow(node, data, 1)">
</el-button>
<!-- <el-button
disabled
type="danger"
size="mini"
@click="() => remove(node, data)">
</el-button> -->
</div>
</div>
</el-tree>
</template>部分
<script>
import { typeList, addtype, updatetype, deltype } from '@/api/baseType'
export default {
data() {
return {
defaultProps: {
id: "Id",
label: 'Name',
children: 'children'
},
//
addDialog:false,
addForm: {},
addRules:{
name:[{required: true,message: ' ',trigger: 'blur'}]
},
pid: null, // id
flag: null, //
node: {}, // tree
nodedata: {}
}
},
created(){
},
methods: {
//
loadNode(node, resolve) {
//
if (node.level === 0) {
//
typeList(node.level).then(res => {
if (res.Data) {
return resolve(res.Data)
} else {
this.$message.error(res.Msg)
}
}).catch(() => {
let data = []
return resolve(data)
})
} else {
// id
typeList(node.data.Id).then(res => {
if (res.Data) {
return resolve(res.Data)
} else {
this.$message.error(res.Msg)
}
}).catch(() => {
let data = []
return resolve(data)
})
}
},
remove(node, data) {
console.log(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);
},
//
addDialogShow(node,data,flag) {
this.node = node //
this.nodedata = data
if(flag === 0) {
this.addDialog = true
this.pid = data.Id
this.flag = 0
}
if(flag === 1) {
this.addDialog = true
this.pid = data.Id
this.addForm.name = data.Name
this.flag = 1
}
},
addSubmit(flag) {
this.$refs.addForm.validate((valid) => {
if(valid){
this.listLoading = true
let arr = Object.assign({}, this.addForm)
console.log(flag)
if(flag === 0) {
let data = {
pid: this.pid,
name: arr.name
}
// api
addtype(data).then(() => {
typeList(data.pid).then(res => {
let id = res.Data[0].Id
const newChild = { id: id, label: arr.name, children: [] };
if (!this.nodedata.children) {
this.$set(nodedata, 'children', []);
}
this.nodedata.children.push(newChild)
this.addDialog = false
this.$notify.success({
message:' ',
duration: 2000
})
})
}).catch(() => {
this.addDialog = false
})
}
if(flag === 1) {
let data = {
name: arr.name
}
updatetype(this.pid,data).then(res => {
this.$set(this.node.data, 'Name',arr.name)
this.addDialog = false
this.$notify.success({
message:' ',
duration: 2000
})
}).catch(() => {
this.addDialog = false
})
}
}
})
}
}
}
</script>ここでは、e-treeのスタイルを少し変えました。
これは個人によって必要です。
<style lang="less" scoped>
.el-tree-node__content {
line-height: 50px;
.custom-tree-node {
width: 100%;
display: block;
.fl {
float: left;
line-height: 31px;
}
.fr {
float: right;
margin-right: 50px;
}
}
}
</style>ここはポップアップボックスで情報を管理します。
ダイナミックなバックグラウンドデータの更新とフロント表示の更新を実現し、
addDialogShow(node,data,flag) {
this.node = node // nodetree
this.nodedata = data
}その後、より良いバックグラウンドアプリが成功したら、Vue.$set()を通じてサブノードデータを更新する。
let arr = Object.assign({}, this.addForm) //
updatetype(this.pid,data).then(res => {
this.$set(this.node.data, 'Name',arr.name) //
this.addDialog = false
this.$notify.success({
message:' ',
duration: 2000
})
}).catch(() => {
this.addDialog = false
})
}