封装一个带查询功能的树形省市区（el-tree）

查询效果：点击左边省市区右边显示相应的信息

组件myy_tree.vue页面

<template><div><el-treeclass="filter-tree":data="items"ref="tree":render-content="renderItem":node-key="defaultProps.id":props="defaultProps":expand-on-click-node="false"@node-click="handleNodeClick"></el-tree></div>
</template><script>
export default {name: "myy-tree",props: {items: {type: Array,required: true,},},data() {return {trees: [],defaultProps: {children: "items",id: "code",},checkList: [],};},created() {},methods: {handleNodeClick(e, v, i) {this.checkList = [];this.getParent(v);this.$emit("selectDidChange", this.checkList);// console.log(v)if (v.childNodes.length > 0 && v.expanded == false) {v.expanded = true;}},getParent(node) {// console.log("node", node);if (!node.parent) return; //无父节点this.checkList.unshift(node.data);this.getParent(node.parent);},renderItem(h, { node, data, store }) {if (data.attr != null && data.attr.count != null && data.attr.count > 0) {return (<div>{data.name}<span style="color:red">（{data.attr.count}）</span></div>);} else {return <span>{data.name}</span>;}},},
};
</script>
<style lang="less">
.el-tree-node:focus > .el-tree-node__content {background-color: #409eff;color: #fff; //节点的字体颜色font-weight: bold;
}
</style>

在页面上使用:

import Myytree from "../../components/xxxx/myy_tree";

  components: {Myytree,},

<div class="box-left"><div style="overflow-y: scroll; height: 100%"><myytree v-bind:items="trees" @selectDidChange="treeSelectDidChange"></myytree></div>
</div>

  trees: [],

   // 获取接口树数据companyssq() {get("/xxxxx/xxx/ssq").then((res) => {this.trees = res.items;});},

   //选中的时候触发treeSelectDidChange(res) {console.log(res,"选中的数据");var treesearch = {}; //声明一个空的对象if (res.length > 0) {treesearch["选中的第一层数据"] = res[0].name; //查询看一下后端要code还是name}if (res.length > 1) {treesearch["选中的第二层数据"] = res[1].name;}if (res.length > 2) {treesearch["选中的第三层数据"] = res[2].name;}this.treesearch = treesearch; //赋值给this.treesearch请求列表的时候把它传给后端完成查询操作},

 treesearch: {},

 get("/xxxxx/list", {pIndex: this.pIndex,pSize: this.pSize,...this.treesearch,}).then(res => {});

封装一个带查询功能的树形省市区（el-tree）相关推荐

面试官：请手写一个带取消功能的延迟函数，axios 取消功能的原理是什么
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列> ...
React Native实现一个带筛选功能的搜房列表（2）
原文链接React Native实现一个带筛选功能的搜房列表(2) 在上一篇中,我们实现了一个下拉刷新和上拉加载更多的列表,那根据一般的开发步骤,接着应该就是进行网络请求,在网络请求之后更新列表数据和 ...
ESP8266本质是一个带wifi功能的单片机
ESP8266本质是一个带wifi功能的单片机,是乐鑫科技开发的,怪不得百度搜ESP8266第一个结果是乐鑫科技的. 所以wifi数传里面本质是有个单片机的,不可能就是几块数电芯片就完成了. http ...
vue实现一个带搜索功能的列表_（Vue起步）2.模板指令：v-for / v-on / v-model
①公众号:王酱酱记 ②记录跟着文档学习Vue的一些关键点,持续更新.感兴趣的小白建议关注一下 ③Vue当中有几个常见的指令,看看是怎么用的,强烈建议你自己在编辑器里打一遍,你就更明白Vue为什么是数据 ...
android+蓝牙体温计,如何制作一个带蓝牙功能的电子体温计？
一. 作品简介该类型蓝牙电子体温计是以一颗具有高精度ADC的MCU为核心搭配高精度NTC温度传感器及高性能蓝牙4.0模块组成的一款低功耗.高精度.高性能的人体电子体温计. 蓝牙电子体温计需配合手机A ...
cocos2dx封装一个具有Layout功能的Point类 (提供源码)
(原创文章,转载请注明原文出处:http://blog.csdn.net/while0/article/details/79032004) 基于cocos2dx开发游戏,免不了设置节点或精灵的位置,这 ...
2023最新帝国CMS7.5手赚网试玩平台源码/可封装APP+带文章功能系统
正文: 帝国CMS开发的手赚网源码,多平台带文章资讯手机APP试玩网站源码可自行后台增减平台和链接,和早先几个版本比较的话,这个版本功能更全,版面更为漂亮,有兴趣的自行去安装体验吧,其它就没什么好介 ...
php buildtrees,thinkphp5带分组功能的树形结构的无限级分类节点展示
-- -- 表的结构 `h_group` -- CREATE TABLE IF NOT EXISTS `h_group` ( `id` smallint(3) unsigned NOT NULL AU ...
ASP.NET Core 实现带认证功能的Web代理服务器
引言最近在公司开发了一个项目,项目部署架构图如下: 思路如图中文本所述,公司大数据集群不允许直接访问外网,需要一个网关服务器代理请求,本处服务器A就是边缘代理服务器的作用. 通常技术人员最快捷的思 ...

封装一个带查询功能的树形省市区（el-tree）

封装一个带查询功能的树形省市区（el-tree）相关推荐

最新文章

热门文章