Ant Design Vue 级联选择器 Cascader 的使用说明

Ant Design Vue 级联选择器 Cascader 的使用说明

Cascader也就是 级联选择器主要 有两个关键属性 分别是 options 和 fieldNames 其实大多数ui框架的使用都差不多
但不同的ui 框架内置属性有很多都是不同的 本人最近入手 一个 Ant design vue 框架的项目 因为之前用的是 element ui 因为项目比较紧 所以没太多时间看文档 所以 就犯了一个错误 就是属性混用 这一点等下会在下面介绍

首先 我们先来介绍 options 这个属性 是 Cascader 用来绑定数据用的

如图所示 这里面绑定的就是你下拉框里数据 如何你的数据格式完全正确 那么只需要绑定options 这一个属性就可以 了

但是事实上 在开发过程中 后端传过来的数据 往往都是一大串数据 完全匹配的可能性真的不大 如图所示

那么就需要用到另一个属性了 fieldNames 他的作用在于 设置 将options 内置的 value lable 和 children 换成自定义 的
具体使用 方法如下

html 中绑定

data 中 定义

最后效果图 如下

最后 我之前 遇到的问题是 将fieldNames 和 element ui 中的配置项 Props 弄混 最后出了错 另外element ui 中使用方法也是一样的