安装依赖
cnpm install babel-plugin-transform-vue-jsx -S
cnpm install babel-helper-vue-jsx-merge-props -S
cnpm install babel-plugin-syntax-jsx -S然后在.babelrc文件中配置插件即可
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
// 引入 transform-vue-jsx的babel支持
"plugins": ["transform-runtime", "transform-vue-jsx"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}
如环境不支持 JSX 语法，下面代码全报错，设置webstorm支持jsx语法
引入element，在main.js
<template>
<div class="expand" id="">
<div class="show">
<el-tree ref="tree" class="expand-tree"
v-if="isLoadingTree"
:data="setTree"
node-key="id"
highlight-current
show-checkbox
default-expand-all
:props="defaultProps"
:expand-on-click-node="false"
:render-content="renderContent"
:default-expanded-keys="defaultExpandKeys"
@node-click="handleNodeClick"></el-tree>
</div>
</div>
</template>
<!-- VUE饿了么树形控件添加增删改功能按钮 -->
<script>
import TreeRender from '../../components/tree/tree-render'
import {mapState} from "vuex";
import {ajax} from "../../service/getData";
import $ from 'jquery';
const maxexpandId = 95;
let treelist;
export default {
name: 'tree',
data() {
show:false;
treelist = [];
return {
maxexpandId: maxexpandId,//新增节点开始id
non_maxexpandId: maxexpandId,//新增节点开始id(不更改)
isLoadingTree: false,//是否加载节点树
setTree: treelist,//节点树数据
defaultProps: {
children: 'children',
label: 'name'
},
defaultExpandKeys: [],//默认展开节点列表
}
},
computed: {
...mapState(["userInfo"])
},
mounted() {
this.initExpand();
this.getTabData();
},
methods: {
initExpand() {
this.setTree.map((a) => {
this.defaultExpandKeys.push(a.id)
});
this.isLoadingTree = true;
},
//请求获取树形的数据
getTabData() {
this.ifload = this.$route.query.ifload;
this.tag = this.$route.params.tag;
ajax(DCIConfig.tabs,
{jsondt: {uid: this.userInfo.ID, tag: this.tag}},
"post",
"json",
true, function (data) {
var datas = data.dt.tree;
var tree = datas.node;
//渲染tree
for (var i = 0; i < tree.length; i++) {
treelist.push(tree[i])
}
if (data.zt == 1) {
//修改id
$(".expand").attr('id', datas.formid);
} else {
vm.$Modal.error({
title: "提示",
content: data.msg
});
}
})
},
handleNodeClick(d, n, s) {//点击节点
d.isEdit = false;//放弃编辑状态
//点击节点弹出from表单
},
renderContent(h, {node, data, store}) { // 把参数传给子组件
let that = this;
return h(TreeRender, {
props: {
DATA: data,
NODE: node,
STORE: store,
maxexpandId: that.non_maxexpandId,
},
on: {
nodeAdd: ((s, d, n) => that.handleAdd(s, d, n)),
nodeEdit: ((s, d, n) => that.handleEdit(s, d, n)),
nodeDel: ((s, d, n) => that.handleDelete(s, d, n)),
property: ((s, d, n) => that.handleproperty(s, d, n))
}
});
},
handleAdd(s, d, n) {//增加节点
// if(n.level >=6){
// this.$message.error("最多只支持五级！")
// return false;
// }
//添加数据
d.children.push({
id: ++this.maxexpandId,
name: '新增节点',
pid: d.id,
isEdit: false,
children: []
});
//展开节点
if (!n.expanded) {
n.expanded = true;
}
},
handleEdit(s, d, n) {//编辑节点
},
handleDelete(s, d, n) {//删除节点
let that = this;
//有子级不删除
if (d.children && d.children.length !== 0) {
this.$message.error("此节点有子级，不可删除！")
return false;
} else {
//新增节点直接删除，否则要询问是否删除
let delNode = () => {
let list = n.parent.data.children || n.parent.data,//节点同级数据
_index = 99999;//要删除的index
list.map((c, i) => {
if (d.id == c.id) {
_index = i;
}
})
let k = list.splice(_index, 1);
this.$message.success("删除成功！")
}
let isDel = () => {
that.$confirm("是否删除此节点？", "提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
delNode()
}).catch(() => {
return false;
})
}
//判断是否新增
d.id > this.non_maxexpandId ? delNode() : isDel()
}
},
handleproperty() {
//修改属性
},
}
}
</script>
<style>
.d-n {
display: none;
}
.expand {
text-align: left;
width: 30%;
height: 100%;
overflow: hidden;
}
.expand > div {
height: 97%;
/*padding-top:20px;*/
width: 100%;
margin: 10px 20px;
max-width: 400px;
overflow-y: auto;
}
.expand > div::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
border-radius: 5px;
}
.expand > div::-webkit-scrollbar-thumb {
background-color: rgba(50, 65, 87, 0.5);
outline: 1px solid slategrey;
border-radius: 5px;
}
.expand > div::-webkit-scrollbar {
width: 10px;
}
.expand-tree {
border: none;
margin-top: 10px;
}
.expand-tree .el-tree-node.is-current,
.expand-tree .el-tree-node:hover {
overflow: hidden;
}
.expand-tree .is-current > .el-tree-node__content .tree-btn,
.expand-tree .el-tree-node__content:hover .tree-btn {
display: inline-block;
}
.expand-tree .is-current > .el-tree-node__content .tree-label {
font-weight: 600;
white-space: normal;
}
.tree-expand {
overflow: hidden;
}
.tree-expand .tree-label.tree-new {
font-weight: 600;
}
.tree-expand .tree-label {
font-size: 0.9em;
}
.tree-expand .tree-label .edit {
width: 80%;
}
.tree-expand .tree-btn {
display: none;
float: right;
margin-right: 20px;
}
.tree-expand .tree-btn i {
color: #8492a6;
font-size: 0.9em;
margin-right: 3px;
}
.el-input {
width: 90% !important;
height: 5% !important;
overflow: hidden !important;
}
</style>
<template>
<span class="tree-expand">
<span class="tree-label" v-show="DATA.isEdit">
<el-input class="edit" size="mini" autofocus
v-model="DATA.name"
:ref="'treeInput'+DATA.id"
@click.stop.native="nodeEditFocus"
@blur.stop="nodeEditPass(STORE,DATA,NODE)"
@keyup.enter.stop.native="nodeEditPass(STORE,DATA,NODE)"></el-input>
</span>
<!--节点名称-->
<span v-show="!DATA.isEdit"
:class="[DATA.id > maxexpandId ? 'tree-new tree-label' : 'tree-label']">
<span><i class="el-icon-document"></i>{{DATA.name}}</span>
</span>
<span class="tree-btn" v-show="!DATA.isEdit">
<i class="el-icon-plus" @click.stop="nodeAdd(STORE,DATA,NODE)"></i>
<i class="el-icon-edit" @click.stop="nodeEdit(STORE,DATA,NODE)"></i>
<i class="el-icon-delete" @click.stop="nodeDel(STORE,DATA,NODE)"></i>
<i class="el-icon-success" @click.stop="property(STORE,DATA,NODE)"></i>
</span>
</span>
</template>
<script>
export default{
name: 'treeExpand',
props: ['NODE', 'DATA', 'STORE', 'maxexpandId'],
methods: {
nodeAdd(s,d,n){//新增
this.$emit('nodeAdd',s,d,n)
console.log(d)
},
nodeEdit(s,d,n){//编辑
d.isEdit = true;
this.$nextTick(() => {
this.$refs['treeInput'+d.id].$refs.input.focus()
})
this.$emit('nodeEdit',s,d,n)
},
nodeDel(s,d,n){//删除
this.$emit('nodeDel',s,d,n);
//this.$refs['treeInput'+d.id].currentValue //获取当前被删除节点的名称
},
nodeEditPass(s,d,n){//编辑完成
d.isEdit = false;
// this.$refs['treeInput'+d.id].currentValue //获取节点修改后的名称
},
property(s,d,n){
// this.$refs['treeInput'+d.id]._uid //获取当前点击的id
//弹框
},
nodeEditFocus(){
//阻止点击节点的事件冒泡
},
}
}
</script>
<style>
.tree-expand{
overflow:hidden;
}
.tree-expand .tree-label.tree-new{
font-weight:600;
}
.tree-expand .tree-label{
font-size:0.9em;
}
.tree-expand .tree-label .edit{
width:47%;
}
.tree-expand .tree-btn{
display:none;
float:right;
margin-right:20px;
}
.tree-expand .tree-btn i{
color:#8492a6;
font-size:0.9em;
margin-right:3px;
}
</style>
