前端小随笔

基于element-ui的el-tree改造；实现父子级节点的增删改

 

<el-tree

:data="setTree"

:props="defaultProps"

node-key="id"

ref="SlotMenuList"

:default-expand-all="true"

:expand-on-click-node="false"

@node-click="rihgtClick"

>

<span class="slot-t-node" slot-scope="{ node, data }">

<span v-show="!node.isEdit">

<span v-show="data.children && data.children.length >= 1">

<i

:class="{ 'fa fa-plus-square': !node.expanded, 'fa fa-minus-square':node.expanded}"

/>

<span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']">{{node.label}}</span>

<span class="node-btn">

<el-button

size="mini"

class="el-icon-plus"

type="text"

@click="NodeAdd( node , data )"

></el-button>

<el-button

size="mini"

class="el-icon-edit"

type="text"

@click="NodeEdit( node , data)"

></el-button>

<el-button

size="mini"

class="el-icon-delete"

type="text"

@click="NodeDel( node , data)"

></el-button>

</span>

</span>

<span v-show="!data.children || data.children.length == 0">

<i class style="margin-right:10px"></i>

<span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']">{{node.label}}</span>

<span class="node-btn">

<el-button

size="mini"

class="el-icon-plus"

type="text"

@click="NodeAdd( node , data )"

></el-button>

<el-button

size="mini"

class="el-icon-edit"

type="text"

@click="NodeEdit( node , data)"

></el-button>

<el-button

size="mini"

class="el-icon-delete"

type="text"

@click="NodeDel( node , data)"

></el-button>

</span>

</span>

</span>

<!-- 编辑输入框 -->

<span class="postion" v-show="node.isEdit">

<el-input

class="slot-t-input"

size="mini"

autofocus

v-model="data.name"

:ref="'slotTreeInput'+data.id"

></el-input>

<div class="dialog-dc">

<span class="dui" @click="apped(node, data)"></span>

<span class="cuo" @click="updele(node, data)"></span>

</div>

</span>

</span>

</el-tree>

 

JavaScript逻辑部分

 

// 取消 添加 修改

updele(n, d){

if (n.isEdit) {

this.$set(n, "isEdit", false);

}

if(d.name == ''){

let _list = n.parent.data.children || n.parent.data; //节点同级数据

let _index = _list.map(c => c.id).indexOf(d.id);

_list.splice(_index, 1);

}

},

//输入框失焦

apped(n, d) {

for (var i = 0; i < this.queryNmae.length; i++) {

if (this.queryNmae[i] == d.name) {

this.$message({

type: "info",

message: "分类名重复"

});

return false;

}

}

if(d.name == ''){

this.$message({

type: "info",

message: "分类名不能为空"

});

return false;

}

if (d.id == undefined) {

this.addQuery(d.name, d.pid);

} else {

this.updateQuery(d.name, d.id);

}

if (n.isEdit) {

this.$set(n, "isEdit", false);

}

this.$nextTick(() => {

this.$refs["slotTreeInput" + d.id].$refs.input.focus();

});

},

NodeEdit(n) {

//编辑节点

if (n.data.id != "root" && n.data.id != "unCategory") {

if (!n.isEdit) {

//检测isEdit是否存在or是否为false

this.$set(n, "isEdit", true);

}

} else {

this.$message({

type: "info",

message: "不可修改、不可删除"

});

}

},

NodeDel(n, d) {

//删除节点

if (n.data.id != "root" && n.data.id != "unCategory") {

if (d.children && d.children.length !== 0) {

this.$message.error("此节点有子级，不可删除！");

return false;

} else {

let DelFun = () => {

let _list = n.parent.data.children || n.parent.data; //节点同级数据

let _index = _list.map(c => c.id).indexOf(d.id);

_list.splice(_index, 1);

this.deleteQuery(d.id);

this.$message.success("删除成功！");

};

//二次确认

let ConfirmFun = () => {

this.$confirm("是否删除此节点？", "提示", {

confirmButtonText: "确认",

cancelButtonText: "取消",

type: "warning"

})

.then(() => {

DelFun();

})

.catch(() => {});

};

//判断是否是新增节点

d.id > this.non_maxexpandId ? DelFun() : ConfirmFun();

}

} else {

this.$message({

type: "info",

message: "不可修改、不可删除"

});

}

},

NodeAdd(n, d) {

//新增节点

//判断层级

if (d.id == "unCategory") {

this.$message({

type: "info",

message: "不可修改、不可删除"

});

} else {

if (n.level >= 4) {

this.$message.error("最多只支持三级！");

return false;

}

//新增数据

d.children.push({

name: "",

pid: d.id,

children: []

});

this.$nextTick(() => {

for (var i = 0; i < n.childNodes.length; i++) {

if (n.childNodes.length - 1 == i) {

this.NodeEdit(n.childNodes[i]);

}

}

});

 

if (!n.expanded) {

n.expanded = true;

}

}

},