iview 级联选择组件_表单组件 - Cascader 级联选择 - 《View UI（即iView）4.2 使用手册》 - 书栈网 · BookStack...

Cascader 级联选择

概述

从一组相关联的数据集合中进行选择，常用于省市区、公司级层、事务分类等。

相比 Select 组件，可以一次性完成选择，体验更好。

代码示例

基础用法

级联选择对数据有较严格要求，请参照示例的格式使用data，每项数据至少包含 value、label 两项，子集为 children，以此类推。

value 为当前选择的数据的 value 值的数组，比如 ['beijing', 'gugong'] ，按照级联顺序依次排序，使用 v-model 进行双向绑定。

exportdefault{

data(){

return{

value1:[],

data:[{

value:'beijing',

label:'北京',

children:[

{

value:'gugong',

label:'故宫'

},

{

value:'tiantan',

label:'天坛'

},

{

value:'wangfujing',

label:'王府井'

}

]

},{

value:'jiangsu',

label:'江苏',

children:[

{

value:'nanjing',

label:'南京',

children:[

{

value:'fuzimiao',

label:'夫子庙',

}

]

},

{

value:'suzhou',

label:'苏州',

children:[

{

value:'zhuozhengyuan',

label:'拙政园',

},

{

value:'shizilin',

label:'狮子林',

}

]

}

],

}]

}

}

}

默认值

指定 value 默认值，组件会在初始化时选定数据。

exportdefault{

data(){

return{

value2:['jiangsu','suzhou','zhuozhengyuan'],

data:[{

value:'beijing',

label:'北京',

children:[

{

value:'gugong',

label:'故宫'

},

{

value:'tiantan',

label:'天坛'

},

{

value:'wangfujing',

label:'王府井'

}

]

},{

value:'jiangsu',

label:'江苏',

children:[

{

value:'nanjing',

label:'南京',

children:[

{

value:'fuzimiao',

label:'夫子庙',

}

]

},

{

value:'suzhou',

label:'苏州',

children:[

{

value:'zhuozhengyuan',

label:'拙政园',

},

{

value:'shizilin',

label:'狮子林',

}

]