javascript - 关于Vue elementui Tree组件自定义编辑删除后值怎么取？
本文介绍了javascript - 关于Vue elementui Tree组件自定义编辑删除后值怎么取？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
点击官方的append或者后，取出来的store依然还是原始数据，数据并没有变化，依然是最初的虚拟数据，请问怎么取出变化后的值。
我有一个不成熟的想法，新建一个数组，在renderContent(h, { node, data, store }) 函数中可以获取到最新添加的data和node.parent,再对新数组进行添加。。。但是实现起来有技术难点，无法判断用户会增加多少层级。。
<template>
<div id="logsearch">
<el-row class="warp">
<el-col :span="24" class="warp-breadcrum">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
<el-breadcrumb-item>日志检索</el-breadcrumb-item>
</el-breadcrumb>
</el-col>
<el-col :span="24">
<el-card class="box-card">
<div class="cardcontent">
<div class="cardLeft" style="border-right: 1px solid lightgray">
<el-form ref="form" label-width="100px" class="editform" style="padding-bottom: 0;">
<el-form-item label="类型选择">
<el-cascader :options="options" :show-all-levels="false" v-model="selectedOptions" @change="handleChange" style="width: 260px;">
</el-cascader>
</el-form-item>
<el-form-item label="输入参数1" class="args" style="display: none;">
<el-input style="width: 220px;" class="arg1" v-model="arg1data"></el-input>
<el-button class="el-icon-plus" size="mini" @click="addargsmenu"></el-button>
</el-form-item>
</el-form>
<div id="argsbox">
</div>
<el-form ref="form" label-width="100px" class="editform">
<el-form-item>
<el-button type="primary" @click="edit()">立即创建</el-button>
<el-button @click="edithide">取消</el-button>
</el-form-item>
</el-form>
</div>
<div class="cardRight">
<el-tree :data="data2" ref="tree2" @node-click="handleNodeClick" :props="defaultProps" node-key="id" default-expand-all :expand-on-click-node="false" :render-content="renderContent" style="border:none">
</el-tree>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
let id = 1000;
let addNode=false;
export default {
data() {
return {
arg1data: "",
editValue: "",
tree: {
store: [],
data: [],
content: "",
node:[],
postdata:[]
},
argId: 1,
data2: [{
id: 1,
label: 'or',
children: [{
id: 4,
label: 'and',
children: [{
id: 9,
label: 'Rising Connect 19'
}, {
id: 10,
label: 'Rising Connect 198'
}]
}]
},
{
id: 2,
label: 'or',
children: []
},
{
id: 3,
label: 'and',
children: []
}
],
defaultProps: {
children: 'children',
label: 'label'
},
options: [{
value: 'and',
label: 'and'
},
{
value: 'or',
label: 'or'
},
{
value: 'EXP',
label: 'EXP',
children: [{
value: '=',
label: '='
},
{
value: '>',
label: '>'
},
{
value: '<',
label: '<'
}
]
}
],
selectedOptions: []
}
},
methods: {
handleNodeClick(data,store){
},
handleChange(value) {
this.editValue = value[value.length - 1];
if(this.editValue == "and" || this.editValue == "or") {
this.argshide();
} else {
this.argsshow();
}
},
addargsmenu() {
this.argId++;
var $div = $('<div class="args"></div>');
var $input = $('<input style="width: 220px;" />')
var html = '<span>输入参数' + this.argId + '</span>'
$div.append(html)
$div.append($input)
$('#argsbox').append($div);
},
argsshow() {
$('.args').show()
},
argshide() {
$('.args').hide();
this.argId = 1;
},
editshow(node,store, data) {
$('.cardLeft').show();
this.tree.store = store;
this.tree.data = data;
this.tree.node = node;
},
edithide() {
$('.cardLeft').hide();
this.selectedOptions = [];
this.arg1data = ""
$('#argsbox').empty();
this.argshide();
},
edit() {
addNode=true;
var that = this;
if(this.editValue == "and" || this.editValue == "or") {
this.tree.content = this.editValue;
this.tree.store.append({ id: id++, label: that.tree.content, children: [] }, that.tree.data);
} else if(this.editValue == "") {
} else {
let inputs = $('.args>input');
if(this.arg1data == "") {
this.arg1data = "空";
}
var inputvalue = this.arg1data;
$.each(inputs, function() {
if($(this)[0].value == "") {
$(this)[0].value = "空"
}
inputvalue += "," + $(this)[0].value;
})
if(inputvalue == "") {
return;
}
this.tree.content = this.editValue + inputvalue;
this.tree.store.append({ id: id++, label: that.tree.content, children: [] }, that.tree.data);
}
this.edithide();
},
remove(store, data) {
store.remove(data);
addNode=true;
console.log(store.data)
},
renderContent(h, { node, data, store }) {
this.tree.postdata=this.data2;
if(addNode==true){
console.log(data)
console.log(node.parent.data.id)
for(var key of this.tree.postdata){
console.log(key)
}
}
if(data.label == "or" || data.label == "and") {
return(
<span>
<span>
<span >{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<el-button size="mini" class="el-icon-edit" on-click={ () => this.editshow(node,store,data) }></el-button>
<el-button size="mini" class="el-icon-close" on-click={ () => this.remove(store, data) }></el-button>
</span>
</span>);
} else {
return(
<span>
<span>{node.label}</span>
</span>)
}
}
}
};
</script>
<style lang="scss">
#logsearch {
.el-card__body {
padding: 0px;
}
.editform {
padding: 20px 0;
}
.cardcontent {
display: flex;
}
.cardLeft {
flex: 2;
text-align: center;
display: none;
}
.el-icon-plus {
border-radius: 50%;
margin: 2px 0 0 5px;
}
#argsbox span {
text-align: right;
vertical-align: middle;
float: left;
font-size: 14px;
color: #48576a;
line-height: 1;
padding: 11px 12px 11px 0;
box-sizing: border-box;
width: 100px;
}
#argsbox input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #bfcbd9;
box-sizing: border-box;
color: #1f2d3d;
font-size: 14px;
height: 36px;
line-height: 1;
outline: 0;
padding: 3px 10px;
margin-left: -32px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
}
#argsbox div {
margin-bottom: 22px;
}
.cardRight {
flex: 5;
}
}
</style>解决方案
我自己解决了！用的最麻烦的方式获取到最终树形图的数据，原理是通过改变属性图真实数据，过程就是利用递归循环查找被点击的data.id与数据中哪个对象id相等来进行判断与递归。包括增删改都是利用这个方法，没找到框架提供的api有关于获取最终数据的参数。。。打印出来的store一直是原始数据。可能功能还不太完善吧，用个框架这个麻烦！
这篇关于javascript - 关于Vue elementui Tree组件自定义编辑删除后值怎么取？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
