a-tree-select 显示数据、获取value和label、限制高度
vue+a-tree-select 多级下拉树的基础使用
·
ant官方关于a-tree-select代码紧凑且不易阅读,在借鉴了其他博主的原文章后进行了个人的详细使用。
参考博文:vue antdesig a-tree组件使用详解 From:Dayaer
1.ant里的效果演示:
2.上代码:
HTML部分:
<a-tree-select
v-if="treeData && treeData.length > 0" //判断数据存在且有长度则显示
:expandedKeys="expandedKeys" //默认展开的数组
:tree-data="treeData" //树的数据
:replaceFields="replaceFields" // treeNode中的字段,详见在下面的data里定义
@expand="handleExpand" //展开节点时调用
@select="onSelect" //被选中时调用
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"//限制最大高度及滚动显示
>
</a-tree-select>
JS部分:
data() {
return {
//对应自己的后端接口返回字段
replaceFields: {
children:'children',//后端数组层级的名字
key:'key', //一般是id
value: 'value'//onSelect(selectedKeys)的selectedKeys的参数值,便于获取然后返回给后端
},
treeData: undefined,
expandedKeys: undefined,
testData:"",//选中后返回给后端的参数
}
},
methods: {
// 获得下拉树数据
getTreedata() {
getTreeList().then((res) => {
this.treeData = res.data
})
},
//展开下拉树,
handleExpand(expandedKeys) {
this.expandedKeys = expandedKeys
},
//选中数据
onSelect(selectedKeys) {
this.testData = selectedKeys
},
}
3.需要同时取得value和title:
加入labelInValue属性
此时选中获取的数据格式为:
{label: "label",value: "value"}
<a-tree-select labelInvalue //加属性/>
//选中数据
onSelect(selectedKeys) {
this.testData.value = selectedKeys.value
this.testData.label = selectedKeys.label
},
4.完成后可能出现的问题:
(1)显示a-tree组件相关报错,没有全局注册;需要在main.js里全局注册组件tree;
import Tree from 'ant-design-vue' //不要写{Tree}形式,会报错
Vue.use(Tree)
(2)特别注意replaceFields里的key的数据不能一样,不然会报错。如果报错后端改成不一样的就好了。
更多推荐
已为社区贡献1条内容
所有评论(0)