技术标签: vue elementui js java开发学习笔记
elementui的el-tree本身可以实现懒加载功能,但是却不能进行远程搜索,思路就是使用两颗树,一颗用来懒加载,另一颗用来全部加载。
j-tree
el-input
,两个el-tree
<template>
<div class="treebox">
<h2>{
{title}}</h2>
<el-input
prefix-icon="el-icon-search"
style="border-radius:0;margin-top:20px"
clearable
:placeholder="placeholder"
:value="value"
@input="$emit('input',$event)"
@keypress.enter.native="filterTree"
/>
<el-tree
ref="tree"
v-show="!value || value.trim() === ''"
:props="defaultProps"
:load="loadNode"
lazy
:expand-on-click-node="true"
:highlight-current="true"
:accordion="true"
@node-click="handleNodeClick"
></el-tree>
<el-tree
:data="data"
v-show="value && value.trim() !== ''"
:props="defaultProps"
:expand-on-click-node="true"
:highlight-current="true"
:accordion="true"
:default-expand-all="true"
@node-click="handleNodeClick"
></el-tree>
</div>
</template>
<script>
export default {
name: "j-tree",
inheritAttrs: false,
props: {
title: {
type: String,
default: '组织目录'
},
placeholder: {
type: String,
default: '搜索机构'
},
value: {
type: String,
default: ''
},
defaultProps: {
type: Object,
default: {
children: "children",
label: "code_name"
}
},
searchedData: {
type: Array,
default: function () {
return [];
}
},
loadNode: {
type: Function,
required: true
}
},
data() {
return {
text: this.value,
data: []
}
},
methods: {
filterTree() {
this.$emit('filter-tree');
},
handleNodeClick(data) {
this.$emit('node-click',data)
}
},
watch: {
value: function (val) {
if (val.trim() === '') {
this.data = [];
}
},
searchedData: function (val) {
this.data = val;
}
}
}
</script>
<style lang="scss" scoped>
.treebox {
border-radius: 5px;
background: #ffffff;
box-shadow: 0px 0px 8px rgba($color: #bababa, $alpha: 0.3);
padding: 40px 25px;
margin-top: 20px;
.el-tree {
margin-top: 20px;
}
.tags {
margin-top: 30px;
margin-bottom: 30px;
}
}
</style>
import JTree from '@/components/j-tree.vue';
components: {
JTree
}
<j-tree :load-node="loadNodeTest" //这个是懒加载树的时候需要的数据
:searched-data="searchedData"
v-model="filterText"
@filter-tree="filterTree" //这个是用来输入关键字过滤用的
@node-click="handleNodeClick" //这个是点击之后做什么事情,就不提供了
></j-tree>
async loadNodeTest(node, resolve) {
let treeData = {
};
if (node.level === 0) {
let parent_id = '';
let params = {
parent_id: parent_id};
const res = await getOrganizations(params)
if (!res) return;
treeData.code_name = res.data.result[0].code_name;
treeData.id = res.data.result[0].id;
if (treeData.code_name) {
return resolve([treeData]);
}
return;
}
const res = await getOrganizations({
parent_id: node.data.id})
if (!res) return;
const orgArr = res.data.result.map((item) => {
return {
code_name: item.code_name,
id: item.id,
};
});
resolve(orgArr);
}
async filterTree() {
if(this.filterText && this.filterText.trim() !== '') {
const res = await getOrganizations4Search({
code_name:this.filterText});
if(!res) return;
this.searchedData = res.data.result;
}
}
带这种上下级关系的数据结构
{
"id": "123",
"org_type": "1",
"crt_no": null,
"org_code": "",
"code_name": "总部",
"parent_id": null,
"sort": "0",
"children": [
{
"id": "456",
"org_type": "0",
"crt_no": "456",
"org_code": "456",
"code_name": "分部1",
"parent_id": "123",
"sort": "42",
"children": [
{
"id": "789",
"org_type": "1",
"crt_no": "456",
"org_code": "789",
"code_name": "分部1-1",
"parent_id": "456",
"sort": null,
"children": []
}
]
}
1.https://cn.vuejs.org/v2/guide/components.html
2.https://cn.vuejs.org/v2/guide/components-props.html
3.https://element.eleme.cn/#/zh-CN/component/tree
文章浏览阅读961次。SVG图片压缩这是个通过借助npm包的一种方式去压缩svg的图片,由于阿里的图库自己创建的图标有大小的限制,当我们想要自己用自己的图标的时候就可以使用这种方式去完成对svg的图片压缩。1、下载node.js (地址:https://nodejs.org/zh-cn/)即前提,必须本地部署好npm,否则就跑不起来。2、下载svgo的包下载node.js成功后,使用命令行安装npm install -g svgo项目官方网址:https://www.npmjs.com/package/svgo_svg压缩工具
文章浏览阅读6.3k次,点赞3次,收藏23次。关注公众号,发现CV技术之美随着深度学习与大数据的进一步发展,效果好的模型往往有着较大的规模和复杂的结构,往往计算效率与资源使用方面开销很大,无法部署到一些边缘设备、移动终端或者嵌入式设备..._联邦知识蒸馏
文章浏览阅读1.3w次,点赞8次,收藏37次。小白必看必坑指南!一学就懂,手把手教你装tensorflow-gpu版本!报学必学会(如何跳坑)!!_tensorflow最新版本
文章浏览阅读1.8k次。近期在不同群里有小伙伴们提出了一些在面试和笔试中遇到的Hive SQL问题,Hive作为算法工程师的一项必备技能,在面试中也是极有可能被问到的,所以有备无患,本文将对这四..._hive笔试
文章浏览阅读244次。本文实例为大家分享了python控制nao机器人身体动作的具体代码,供大家参考,具体内容如下今天读的代码,顺便写了出来,与文档的对比,差不多。import sysimport motionimport almathimport naoqi from ALProxydef StiffnessOn(proxy):pName="Body"pStiffnessListspTime=1.0proxy.sti..._nao机器人摇头代码 pythen
文章浏览阅读5k次。HCTF WEB wpHCTF的题目总体来说相当不错,部分题目质量很高,同时也有很多我没有考虑到的地方,这里记录一哈学习笔记。hide and seek这道题目质量相当不错,来源于实际。Descriptiononly admin can get it update1/更新1: 1. fix bugs 2. attention: you may need to restart all your wo..._i will tell you a secret, but you should upload a zipfile first.
文章浏览阅读2.8k次。七夕节是个浪漫的节日,利用几何画板这个强大的绘图软件也可以对心爱的人表示!笛卡尔心形线像极了人的一颗心,用来表达爱意再好不过了。本文我们来介绍具体步骤如下:1.新建参数。右键绘图区空白处,“新建参数”,标签为 a,数值为 4,单位“无”。 新建标签为a数值为4的参数2.快捷键“Ctrl+G”,调出绘制新函数编辑器。点“方程”,选极坐标方程。在编辑器中 点入如图函数。“确定”,得到心形图象。 在极坐..._笛卡尔心形曲线函数表达式
文章浏览阅读1.4k次。农作物的生长受到自然条件的影响,如温湿度、二氧化碳浓度和光照等。随着计算机技术和无线传感网络的发展,用信息技术改造农业尤其是农业温室大棚是农业发展的必然阶段。温室环境检测是实现温室智能化控制的一个重要环节。如何有效的利用传感器技术、自动检测技术、通讯技术和计算机技术,研制出对温室温度、湿度、光照和二氧化碳浓度等多种温室环境要素进行测量的数据采集系统,是科技工作者面临的重要课题。中国的智能温室大棚起..._数据采集程序流程图
文章浏览阅读1.5k次。App开发和发布过程中证书基础知识:1. Certification(证书)证书是对电脑开发资格的认证,每个开发者帐号有一套,分为两种:1) Developer Certification(开发证书)安装在电脑上提供权限:开发人员通过设备进行真机测试。可以生成副本供多台电脑安装;2) Distribution Certification(发布证书)_软件开发时会涉及到证书的保存吗知乎
文章浏览阅读753次。前提首先需求是在已有模型的基础上,尽量少做模型修改,少修改动画,实现一个眼睛+头部跟随相机的转动因为美术要求动画使用Generic,所以不能使用Unity自带的Humanoid的IK系统尝试过市场上已有的几个插件 FinalIK,BioIK,对我们的模型表现都奇差,歪脖、翻白眼等等,所以只能实现一个类似IK的自定义转动先放一张效果图,希望大家多多关注我们公司的游戏《王牌御史》~需求1 需要给定一个..._unity 捏脸角色看向相机
文章浏览阅读1.3k次。成为认证专业的Python编程认证是市场上最受追捧的认证之一。原因是Python提供的一系列功能。列表在很大程度上简化了程序员的生活。在本文中,我们将学习一个这样的特性,即如何从列表中删除元素。在继续成为认证专业的Python编程认证是市场上最受追捧的认证之一。原因是Python提供的一系列功能。列表在很大程度上简化了程序员的生活。在本文中,我们将学习一个这样的特性,即如何从列表中删除元素。在继续..._remove list python
文章浏览阅读5.3k次,点赞2次,收藏27次。 大家好,我是为广大程序员兄弟操碎了心的小编,每天推荐一个小工具/源码,装满你的收藏夹,每天分享一个小技巧,让你轻松节省开发效率,实现不加班不熬夜不掉头发,是我的目标! 今天小编推荐一款流程设计器easy-flow, easy-flow基于VUE+ElementUI+JsPlumb的流程设计器,通过 vuedraggable 插件来实现节点拖拽。功能介绍支持拖拽添加节点点击线进行设置条件支持给定数据加载流程图支持画布拖拽支持连线样式、锚点、类型自定义覆盖支持力导图如何集成在自_vue 流程设计器