ant design vue2 级联选择器默认选中
时间: 2023-10-23 14:10:24 浏览: 154
基于vue20实现的级联选择器
你可以通过设置 `v-model` 和 `default-value` 属性来实现级联选择器的默认选中。`v-model` 用于绑定用户选择的值,而 `default-value` 用于设置级联选择器的默认值。
以下是一个示例:
```html
<template>
<a-cascader
v-model="selected"
:options="options"
:show-all-levels="false"
:default-value="defaultValue"
/>
</template>
<script>
export default {
data() {
return {
selected: [],
options: [
{
value: "beijing",
label: "北京",
children: [
{
value: "haidian",
label: "海淀区",
children: [
{
value: "zhongguancun",
label: "中关村",
isLeaf: true,
},
],
},
],
},
{
value: "shanghai",
label: "上海",
children: [
{
value: "pudong",
label: "浦东新区",
children: [
{
value: "lujiazui",
label: "陆家嘴",
isLeaf: true,
},
],
},
],
},
],
};
},
computed: {
defaultValue() {
return ["beijing", "haidian", "zhongguancun"];
},
},
};
</script>
```
在上面的示例中,`defaultValue` 计算属性返回一个数组,表示默认选中北京市、海淀区和中关村。将 `defaultValue` 绑定到 `default-value` 属性上即可实现级联选择器的默认选中。
阅读全文