ant design vue 组件 Tree

实现效果：

实现代码：

<div class="tree"><a-treeshow-iconshow-line:load-data="onLoadData1"  //展开节点时@select="treeselect"  //点击节点时@expand="openkeys":autoExpandParent="false":tree-data="treeData1"  //存放树的数据style="margin-top: 10px"/>
</div>handleOk1() {// 取得最外层的真树getArcTree(Object.assign({modelId:this.modelId})).then(res => {res.rows.forEach(item =>{item.title = item.name,item.key = item.id})this.treeData1 = treeData2(res.rows, 'id')})console.log("this.treeData1",this.treeData1);
},onLoadData1(treeNode) {console.log("treeNode",treeNode.dataRef)return new Promise(resolve => {// 当展开的是最外层的真树或最后一层时if(treeNode.dataRef.children || treeNode.dataRef.mc == 3){resolve();} else if(treeNode.dataRef.mc != 1){// 当最外层真树结束时console.log("最外层到底了");if (this.openkey.includes(treeNode.dataRef.key)) {this.Keys = treeNode.dataRef.arcid}treeNode.dataRef.children = []getArcList().then((res) => {const data = res.rows data.forEach((item,index) =>{treeNode.dataRef.children.push({title : item.name,key : item.arcId,arcid : item.arcId,designphase: this.queryParam.designphase,mc : 1, //用来判断时中间一层的节点}) })this.treeData1 = [...this.treeData1];console.log("this.treeData1",this.treeData1);resolve();})        resolve();}else if(treeNode.dataRef.mc == 1){// 判断如果是中间一层的节点时，调用其他接口，继续往树上加数据this.getTreeTwo(treeNode.dataRef)console.log("到最后一层了");resolve();}});
},async getTreeTwo(item) {// this.selectedKeys = item.arcid// 调取接口const treeDataRes = await getList(data)console.log("treeDataRes",treeDataRes);if (treeDataRes.rows.length != 0) {console.log("有数据");this.treeSet = this.getTree(treeDataRes.rows)item.children = this.treeSetthis.treeData1 = [...this.treeData1]} else {console.log("没有数据");this.treeData1 = [...this.treeData1]}
},// 点击树节点触发
treeselect(selectedKeys, info,value) {console.log("11111",selectedKeys,info.node.dataRef,value)this.selectedKeys = selectedKeys.toString()const test1 = /\-/if(this.selectedKeys == '1'){// 判断key值为1时}else if(test1.test(this.selectedKeys)){// 判断key值中有-时}else if(info.node.dataRef.mc == 3){// 判断是否是最后一层节点}
},

ant design vue 组件 Tree相关推荐

【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
1,首先在vue2项目中安装ant design vue组件 npm install ant-design-vue@1.7.2 2,a-cascader组件在页面中的使用 <template&g ...
Ant Design Vue 组件@chang绑定方法如何传递自定义参数
Ant Design Vue 组件@chang绑定方法如何传递自定义参数今天在写代码的时候遇到一个问题: 在嵌套标签中外层使用了一个v-for循环去循环一个数组,当内层想要拿取index,并且使用 ...
Ant Design Vue 组件或图标的引入和使用
// 组件或图标引入 <script lang="ts">import { defineComponent, reactive, ref } from 'vue';im ...
Ant Design Vue 中 Tree 树形控件 defaultExpandAll 设置无效
问题: 在代码中设置了default-expand-all属性树形结构还是没有展开原因: 因为default-expand-all属性是用来设置默认值的,而初始值treeData通常情况下是需要调 ...
ant vue 设置中文_vue+Ant design vue做项目-Go语言中文社区
哈喽哈喽,这期带来蚂蚁金服的一个 Ant Design 的 Vue 实现. 样式还是很现代化的,嗯...现在是2019年9月17,对现在来说还很fashion过几年就不知道了. 话不多说直接上手,喜欢 ...
ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
2019年 Vue 组件库大评测 Element, iView, HeyUI, Ant Design Vue
2018年我写的Vue组件库对比文档: https://juejin.im/post/5a9628415188257a7b5ac678 一年的时间,每一个组件库都有了更多的发展,Ant Design ...
Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
前言这次的后台管理系统项目选型用了Vue来作为主技术栈: 因为前段时间用过React来写过项目(用了antd),感觉棒棒的. 所以这次就排除了Element UI,而采用了Ant Design Vu ...
vue3+ant design vue+ts实战【ant-design-vue组件库引入】
vue3 UI组件库 Ant Design of Vue Ant Design Vue

ant design vue 组件 Tree

ant design vue 组件 Tree

ant design vue 组件 Tree相关推荐

最新文章

热门文章