首页 > 其他分享 >Vue2环境中AntDeisgn1.x的树形下拉选择组件

Vue2环境中AntDeisgn1.x的树形下拉选择组件

时间:2024-12-24 11:22:44浏览次数:10  
标签:AntDeisgn1 code return title 树形 nodeData Vue2 array

示例

相关代码

<a-tree-select
					v-model="type"
					show-search
					style="width: 100%"
					:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
					placeholder="请选择"
					allow-clear
					:tree-data="treeData"
					:filter-tree-node="filterTreeNode">
</a-tree-select>

// 针对前后端树形数据结构不一致处理函数
transformTreeData(array) {
   if(!isEmpty(array)) {
		return array.map(nodeData => {
			return {
				title: nodeData.name,
				value: nodeData.code,
				key: nodeData.code,
				children: isEmpty(nodeData.child) ? [] : this.transformTreeData(nodeData.child)
			}
		})
	}
}
// 自定义过滤函数
filterTreeNode(inputValue, treeNode) {
	// 根据中文名称(title)进行过滤
	return treeNode.data.props.title.toLowerCase().includes(inputValue.toLowerCase());
},

标签:AntDeisgn1,code,return,title,树形,nodeData,Vue2,array
From: https://www.cnblogs.com/openmind-ink/p/18626955

相关文章

  • 使用css3绘制企业人员管理树形组织架构图特效
    使用CSS3绘制企业人员管理树形组织架构图是一个有趣且具有挑战性的任务。以下是一个基本的步骤指南,帮助你开始:1.HTML结构首先,你需要定义HTML结构来表示树形组织架构。通常,你可以使用嵌套的<div>或<ul>/<li>元素来表示树形结构。<divclass="organization-tree"><u......
  • 基于vue2的h5页面实现拉起支付宝app支付且轮询支付结果
    *只有前端部分 1.首先data需要储存几个值:   payUrl:"",//订单支付跳转链接   isFetchCode:false,//正在生成订单   payStatus:"",//订单状态,用于判断是否还需要继续请求订单支付结果接口   userDown:false,//用户点击已支付完成按......
  • Vue2 使用wangEditor5 上传图片
    安装:yarnadd@wangeditor/editor#或者npminstall@wangeditor/editor--saveyarnadd@wangeditor/editor-for-vue#或者npminstall@wangeditor/editor-for-vue--save使用:模板<template><divstyle="border:1pxsolid#ccc;">......
  • vue2后台管理
    1.前言后台管理系统包含几个功能:权限管理,菜单管理,CRUD模板等权限管理不仅仅体现在菜单的渲染,还涉及到动态路由2.动态路由系统页面分为2种:管理页面(带左侧和顶部的导航,主内容取才是真正的内容),和全屏页面全屏页面:使用一级路由进行注册,直接渲染该页面组件管理页面:使用二级......
  • Vue2 应用开发必备技能:构建优雅的 Axios 请求封装模块
    Vue2应用开发必备技能:构建优雅的Axios请求封装模块前言第一步:安装Axios第二步:创建Axios封装模块1.引入Axios2.创建Axios实例3.请求拦截器4.响应拦截器5.导出封装的实例第三步:封装具体接口请求第四步:在Vue组件中使用总结前言在Vue2项目中,数据请......
  • Vue2打造科技范十足的个人博客:炫酷特效 + 精美布局 + 完整源码 【前端实战】Vue2瀑布
    效果图......
  • vue2 脚手架安装及使用
    1.安装npminstall-g@vue/cli2.查看版本 vue-V3.使用3.1命令形式vuecreatemy-project   3.2可视化操作       ......
  • 树形dp专项测试1
    A.PromisesICan'tKeep题目意为求以每个点为根时的期望得分的最大值,换根DP即可。式子不太难推,半个小时就出来了。太长了不往这写了。Code#include<bits/stdc++.h>#definelllonglong#defineilinline#defineread(x){\ charch;\ intfu=1;\ while(!isdigit(ch......
  • 树形DP做题记录
    A.「MXOIRound1」城市首先推个小式子,把让求的答案中和\(n+1\)有关的分出来:\[\begin{align}&\sum_{i=1}^{n+1}\sum_{j=1}^{n+1}cost(i,j)\\=&\sum_{i=1}^{n+1}\sum_{j=1}^{n}cost(i,j)+\sum_{i=1}^{n+1}cost(i,n+1)\\=&\sum_{i=1}^{n}\sum_{j=1}^{n}cost(i,j)+\......
  • vue2 配置 mock.js 模拟后端数据
    安装mockj首先确保你有一个vue2项目,如果没有,可以用VueCLI创建一个:vuecreatevue-mock-demo开始安装Mock.jsnpminstallmockjs--save-dev创建Mock配置文件在项目的src目录下新建一个文件夹mock,并在其中创建index.js文件,用于编写模拟接口。例如(src/mock......