a-tree-select 基本使用，下拉框高度和宽度设置、回显时滚动条定位解决。

已于 2023-03-24 16:14:37 修改
阅读量6.1k 收藏 12
点赞数 4
分类专栏： Ant Design 文章标签： javascript 前端 html
于 2023-03-13 14:37:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45325810/article/details/129492434
版权

目录

一、基本使用

1. 界面效果

![在这里插入图片描述](https://img-blog.csdnimg.cn/35851e814583472bb366d6173f9a52d4.png

2. 代码实现

<template>
  <div>
    <div class="box">
      <a-tree-select
        v-model="name"
        :replaceFields="replaceFields"
        :tree-data="treeData"
        class="tree-select"
      >
      </a-tree-select>
    </div>
  </div>
</template>

<script>
import { getPkProperty } from '@/api/process-cfg/process-cfg.js'
export default {
  data() {
    return {
      replaceFields: {
        children: 'subclasses',
        title: 'dsp_class_name',
        key: 'class_name',
        value: 'class_name'
      },
      treeData: [],
      name: ''
    }
  },
  created() {
    this.getSortData()
  },
  methods: {
    async getSortData() {
      let result = await getPkProperty()
      this.treeData = result.subclasses
    }
  }
}
</script>

<style>
.box {
  margin: 100px;
  width: 500px;
  height: 500px;
}

.tree-select {
  width: 200px;
}
</style>

3. 问题1：下拉框占满整个屏幕

1）问题效果
在这里插入图片描述
2）理想效果
在这里插入图片描述
3）完整代码

说明：设置 dropdownStyle（ 下拉菜单样式 ），添加如下代码，高度可自己调整。 :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"

<template>
  <div>
    <div class="box">
      <a-tree-select
        v-model="name"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" 
        :replaceFields="replaceFields"
        :tree-data="treeData"
        class="tree-select"
      >
      </a-tree-select>
    </div>
  </div>
</template>

<script>
import { getPkProperty } from '@/api/process-cfg/process-cfg.js'
export default {
  data() {
    return {
      replaceFields: {
        children: 'subclasses',
        title: 'dsp_class_name',
        key: 'class_name',
        value: 'class_name'
      },
      treeData: [],
      name: ''
    }
  },
  created() {
    this.getSortData()
  },
  methods: {
    async getSortData() {
      let result = await getPkProperty()
      this.treeData = result.subclasses
    }
  }
}
</script>

<style>
.box {
  margin: 100px;
  width: 500px;
  height: 500px;
}

.tree-select {
  width: 200px;
}
</style>

4. 问题4：菜单内容过长时，下拉菜单宽度无限变宽。

1）问题效果
在这里插入图片描述
2）理想效果

说明：与文本框同宽，内容过长时出现横向滚动条。

在这里插入图片描述
3）完整代码

说明：设置 dropdownMatchSelectWidth （下拉菜单和选择器同宽）。:dropdownMatchSelectWidth="true"

<template>
  <div>
    <div class="box">
      <a-tree-select
        v-model="name"
        :dropdownMatchSelectWidth="true"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :replaceFields="replaceFields"
        :tree-data="treeData"
        class="tree-select"
      >
      </a-tree-select>
    </div>
  </div>
</template>

<script>
import { getPkProperty } from '@/api/process-cfg/process-cfg.js'
export default {
  data() {
    return {
      replaceFields: {
        children: 'subclasses',
        title: 'dsp_class_name',
        key: 'class_name',
        value: 'class_name'
      },
      treeData: [],
      name: ''
    }
  },
  created() {
    this.getSortData()
  },
  methods: {
    async getSortData() {
      let result = await getPkProperty()
      this.treeData = result.subclasses
    }
  }
}
</script>

<style>
.box {
  margin: 100px;
  width: 500px;
  height: 500px;
}

.tree-select {
  width: 200px;
}
</style>

二、数据回显、滚动条定位

1. 界面效果

说明：将上次选中的内容回显，默认展开该节点及父节点，并将滚动条自动定位到选中的节点。

在这里插入图片描述

2. 代码实现

思路：1）设置默认展开节点 treeDefaultExpandedKeys 2）将滚动条定位到选中节点处

2.1 获取默认展开节点

思路：
1）根据选中节点的key，找到这个节点的所有父节点的key。这里用的是 xe-utils 库里封装好的方法。
2）由于 findTree 方法有指定的数据格式，所以我们需要将数据格式化（key:id，child：‘children’），右侧是格式化后的。
3）格式化方法为 mapTree。

2.1.1 代码实现
getExpandKeys(id) {
      // 1.数据格式化
      let newTree = XEUtils.mapTree(
        this.treeData, // 格式化树数据
        (item) => {
          return {
            id: item.class_name // id对应的字段名
          }
        },
        {
          children: 'subclasses', // 子数组对应的字段名
          mapChildren: 'children' // 子数组格式化后的名称
        }
      )
      // 2.找到节点路径
      let data = XEUtils.findTree(newTree, (item) => item.id === id)
      // 3.获取默认展开节点
      this.treeDefaultExpandedKeys = data.nodes.map((item) => item.id)
}
2.1.2 说明

1） mapTree 方法

  • api
    在这里插入图片描述
  • 格式化后数据：只有id（key），子数组为 children
    在这里插入图片描述

2） findTree方法

  • api
    在这里插入图片描述
  • 返回数据展示：
    在这里插入图片描述

2.2 设置滚动条定位

2.2.1 注意：找到选中后的样式名，见下图。

在这里插入图片描述

2.2.2 代码实现
 setTimeout(() => {
        this.treeDefaultExpandedKeys = data.nodes.map((item) => item.id)
      }, 500)
      setTimeout(() => {
        if (
          document.getElementsByClassName('ant-select-tree-node-selected')
            .length > 0
        ) {
          document
            .getElementsByClassName('ant-select-tree-node-selected')[0]
            .scrollIntoView()
        }
 }, 1000)

三、完整代码

<template>
  <div>
    <div class="box">
      <a-tree-select
        v-model="name"
        :dropdownMatchSelectWidth="true"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :replaceFields="replaceFields"
        :treeDefaultExpandedKeys="treeDefaultExpandedKeys"
        :tree-data="treeData"
        class="tree-select"
        v-if="treeData.length > 0"
      >
      </a-tree-select>
    </div>
  </div>
</template>

<script>
import { getPkProperty } from '@/api/process-cfg/process-cfg.js'
import XEUtils from 'xe-utils'
export default {
  data() {
    return {
      replaceFields: {
        children: 'subclasses',
        title: 'dsp_class_name',
        key: 'class_name',
        value: 'class_name'
      },
      treeData: [],
      name: '',
      treeDefaultExpandedKeys: []
    }
  },
  async created() {
    await this.getSortData()
    await this.echoData()
  },
  methods: {
    async getSortData() {
      let result = await getPkProperty()
      this.treeData = result.subclasses
    },
    async echoData() {
      // 1.获取回显数据
      this.name = '国外花键轴磨床'
      // 2.获取默认展开节点
      this.getExpandKeys(this.name)
    },
    getExpandKeys(id) {
      // 1.数据格式化
      let newTree = XEUtils.mapTree(
        this.treeData,
        (item) => {
          return {
            id: item.class_name
          }
        },
        {
          children: 'subclasses',
          mapChildren: 'children'
        }
      )
      // 2.找到节点路径
      let data = XEUtils.findTree(newTree, (item) => item.id === id)
      // 3.设置展开的key
      setTimeout(() => {
        this.treeDefaultExpandedKeys = data.nodes.map((item) => item.id)
      }, 500)
      setTimeout(() => {
        if (
          document.getElementsByClassName('ant-select-tree-node-selected')
            .length > 0
        ) {
          document
            .getElementsByClassName('ant-select-tree-node-selected')[0]
            .scrollIntoView()
        }
      }, 1000)
    }
  }
}
</script>

<style>
.box {
  margin: 100px;
  width: 500px;
  height: 500px;
}

.tree-select {
  width: 200px;
}
</style>
小泡泡c
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
给select下拉框设置高度
weixin_43488742的博客
04-08 4797
给select下拉框设置高度 效果： select属性： onmousedown="if(this.options.length>4){this.size=4}" onblur="this.size=0" onchange="this.size=0" this.size=4：高度为4行 this.options.length>4：总行数大于4的执行此代码 源码 <!D...
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
"el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件"是一个自定义的前端UI组件，它结合了Element UI库中的el-select和el-tree两个组件的功能，创建了一个适用于数据层级关系展示的选择器。...
封装自定义树a-tree-select
qq_53608274的博客
05-15 192
【代码】封装自定义树a-tree-select。
Ant Design Vue 之a-tree-select
qq_40263927的博客
01-30 4903
Ant Design Vue 是比较流行的vue框架之一，主要是展示a-tree-select 的简单用法，a-tree-select组件主要用于展示树结构的选择。
el-tree默认高亮和默认展开
最新发布
MISS_zhang_0110的博客
05-27 212
【代码】el-tree默认高亮和默认展开。
学习记录514@react使用antd选择器设置下拉菜单宽度
教练我想学编程
12-15 6236
默认选择器和下拉菜单是等宽的，但是因为的选择项有些比较长，无法全部显示，因此要设置下拉菜单和选择器不一样宽。 新建index.css文件 .select-drop-down-platform { width: 360px; } 使用样式 注意一定要引入样式文件，我用的是函数式组件，这里只列举关键代码 dropdownMatchSelectWidth={false} 设置选择器和下拉菜单是不要等宽，一定要设置这个 dropdownClassName=“select-drop-down-plat.
a-tree-select组件@change事件中获取到原数组中的其他属性
qq_45530512的博客
01-04 1004
场景：页面上展示一个a-tree-select组件，但是我需要再change变动时获取到gateway。
el-tree-select树形选择 数据回显
weixin_46319117的博客
03-23 8013
由于用到懒加载，与一次性全部加载数据不同的是，当前只有ID，而树结构还没渲染，就会导致没有label回显。所以我们要在组件刚渲染的时候，就构造我们想要的树节点。是el-tree 和 el-select 两个组件的结合体，他们的功能都一样，其次就是一定要注意，后端返回给我们回显的数据类型和。（默认勾选的节点的 key 的数组）至关重要，（默认展开的节点的 key 的数组） 和。数组里的id是否是一样的，如果一个是。类型，也会回显不成功。
解决element ui select下拉框不回显数据问题的解决
10-17
当使用`el-select`组件绑定数据模型（`v-model`）时，下拉框在编辑表单时无法显示已选择的选项。开发者可能发现，虽然数据已经正确地从服务器获取，但在界面上并未正确地回显到下拉框中。这通常是由于数据类型不匹配...
在element-ui的select下拉框加上滚动加载
12-12
在项目中，我们需要运用到很多来自后端返回的数据。...于是《在element-ui的select下拉框加上滚动加载》诞生了。 这里通过自定义封装vue指令进行封装。（什么是指令：官方指令叫v-on,v-model） 以下以element-ui中的sel
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
antd的select下拉框因为数据量太大造成卡顿的解决方式
01-22
相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。...
vue antdv 中tree-select组件使用 方法
sinat_23568835的博客
08-10 5213
tree-select 组件，不注册会在浏览器报需要注册的错误，搞了半天，原来是组件引用的错误 vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <a-tree-select> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in
TreeSelect组件在列表检索页与el-input宽度不一致问题
qq245488540的专栏
02-02 254
在基于Vue+ElementUI框架的列表界面中，使用栅格布局，同时加载treeselect组件和el-input组件，会出现treeselect宽度大于el-input宽度的问题。
vue-treeselect修改样式，高度，宽度
JCM_ZZ的博客
03-31 1万+
/* Treeselect */ .treeselect-main { width: 204px; line-height: 30px; .vue-treeselect__placeholder { line-height: 30px; } .vue-treeselect__control { height: 30px; } } <el-form-item label="单选" prop="hospitalId"> <treeselect v-mode
vue Treeselect 下拉树选择 问题总结
Hi~豆豆麻麻
01-31 1万+
  情况： 解决方法： 截图： 问题二：只能选择最小分类 如图： 问题三：显示 分类的个数
element ui的el-select框和选项框的宽度设置问题
热门推荐
Beam
04-30 7万+
最终效果图 有数据时： 无数据时： 常见情况-有数据时 代码： <el-select v-model="devType" style="width:100%"> <el-option v-for="item in devTypes" :key="item.value" :label="item.label" :value="item.value"></el-op...
el-tree-select如何一直显示下拉框
06-10
el-tree-select 组件可以通过设置 popper-append-to-body 属性来控制下拉框的位置，将其设置为 true 可以让下拉框一直显示在页面中。具体代码如下： ```html <el-tree-select popper-append-to-body> <!-- Tree Data --> </el-tree-select> ``` 需要注意的是，这种方式下拉框会一直显示在页面中，可能会影响到页面的排版和美观度，建议根据实际情况进行使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值