console
new Vue({
el: '#app',
data: function () {
return {
formData:{},
form:{},
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
},
allowDrop(draggingNode, dropNode, type) {
console.log(draggingNode.level, dropNode.level)
//注掉的是同级拖拽
if (draggingNode.level === dropNode.level) {
return type === 'prev' || type === 'next'
} else {
// 不同级进行处理
return false
}
}
}
})
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-form label-position="left" ref="formData" :model="formData" label-width="80px" >
<el-row type="flex" justify="center" :inline="true" align="middle" :gutter="10">
<el-col :span="10" align="middle" :gutter="10">
<el-form-item label="输入网点" >
<el-input v-model="form.input2" placeholder="xx网点"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">2</el-col>
<el-col :span="20">2</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="10">2</el-col>
<el-col :span="10">3</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="10">4</el-col>
<el-col :span="10">5</el-col>
</el-row>
</el-form>
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :draggable="true" :allow-drop="allowDrop"></el-tree>
</div>