介绍
这篇文章主要介绍了元素el-tree组件中动态加载,新增,更新节点的实现方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
最近在根据需求,需要用到树形控件,避署的封装了树形控件正好拿来用,用的途中遇到一些问题就总结下,哈哈哈
说正的事,我需要动态的加载出整个树形结构,刚好就有
& lt; template>
& lt; el-tree
,,empty-text=霸菸奘荨?
,,:expand-on-click-node=癴alse"
,,:道具=癲efaultProps"
,,:负荷=發oadNode"
,,node-key=癷d"
,,lazy>
,,& lt; div 类=癱ustom-tree-node", slot-scope=皗节点的不同之处是,data }“比;
,,,& lt; div 类=癴l"祝辞& lt;小姐:类=癳l-icon-menu"祝辞& lt;/i> {{, node.label }} & lt;/div>
,,,& lt; div 类=癴r"比;
,,,,& lt; el-button
,,,,,类型=皃rimary"
,,,,,大?癿ini"
,,,,,@click=?),=祝辞,addDialogShow(节点,数据,,0)“比;
,,,,,新增
,,,,& lt;/el-button>
,,,,& lt; el-button
,,,,,类型=皃rimary"
,,,,,plain
,,,,,大?癿ini"
,,,,,@click=?),=祝辞,addDialogShow(数据节点,,,,1)“比;
,,,,,更新
,,,,& lt;/el-button>
,,,,& lt; !——& lt; el-button
,,,,,禁用
,,,,,类型=癲anger"
,,,,,大?癿ini"
,,,,,@click=?),=祝辞,删除(节点,数据),在
,,,,,删除
,,,,& lt;/el-button>,——比;
,,,& lt;/div>
,,& lt;/div>
& lt;才能/el-tree>
& lt;/template>
el-tree标准样式了
部分
& lt; script>
{,import typeList的不同之处是,addtype, updatetype,, deltype },得到& # 39;@/api/basetype # 39;
,export default {
数据才能(),{
,,return {
,,,defaultProps:, {
,,,,,,,“Id",
,,,,,标签:,& # 39;名字# 39;
,,,,,孩子们:,& # 39;孩子# 39;
,,,},
,,,//新增相关
,,,addDialog:假的,
,,,addForm:, {},
,,,addRules: {
,,,,名字:[{要求:真的,消息:& # 39;请输入基础类型名& # 39;,触发:,& # 39;模糊# 39;}]
,,,},
,,,pid:, null,,//,基础类型得父级id
,,,国旗:,null,,//操作标志位
节点:,,,,{},,//,tree 节点对象
,,,nodedata:, {},
,,}
,,},
创造的才能(){
,,},
方法:才能,{//,,,加载树结点
,,loadNode(节点,解决),{
,,,//,如果是顶级的父节点
,,,if (node.level ===, 0), {
,,,,//,查找顶级对象
,,,,typeList (node.level),然后(res =祝辞,{
,,,,,if (res.Data), {
,,,,,,return 解决(res.Data)
,,,,,},{else
,,,,,,,美元message.error (res.Msg)
,,,,,}
,,,,}).catch((),=祝辞,{
,,,,,let data =, []
,,,,,return 解决(数据)
,,,,})
,,,},{else
,,,,//,根据父节点id找寻下一级的所有节点,
,,,,typeList (node.data.Id),然后(res =祝辞,{
,,,,,if (res.Data), {
,,,,,,return 解决(res.Data)
,,,,,},{else
,,,,,,,美元message.error (res.Msg)
,,,,,}
,,,,}).catch((),=祝辞,{
,,,,,let data =, []
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
