support Cascader
support Cascader
This commit is contained in:
parent
2d43f26b05
commit
47a7f21dc6
11 changed files with 195 additions and 94 deletions
|
@ -1,24 +1,85 @@
|
|||
<template>
|
||||
{{ text }}
|
||||
<Cascader :data="data" @on-change="handleChange">
|
||||
<a href="javascript:void(0)">选择</a>
|
||||
</Cascader>
|
||||
<!--<template>-->
|
||||
<!--<div>-->
|
||||
<!--<Cascader :data="data" v-model="value1"></Cascader>-->
|
||||
<!--{{ value1 }}-->
|
||||
<!--<div @click="c">change</div>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--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: '狮子林',-->
|
||||
<!--}-->
|
||||
<!--]-->
|
||||
<!--}-->
|
||||
<!--],-->
|
||||
<!--}]-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--methods: {-->
|
||||
<!--c () {-->
|
||||
<!--this.value1 = ['jiangsu', 'suzhou', 'zhuozhengyuan']-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
<Row>
|
||||
<i-col span="4">
|
||||
Disabled <Switch :checked.sync="disabled"></Switch>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
<Cascader :data="data" :value.sync="value1" :disabled="disabled"></Cascader>
|
||||
</i-col>
|
||||
</Row>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Cascader :data="data" v-model="value2" change-on-select></Cascader>
|
||||
{{ value2 }}
|
||||
<div @click="c">change</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
disabled: false,
|
||||
text: '未选择',
|
||||
value2: [],
|
||||
data: [{
|
||||
value: 'beijing',
|
||||
label: '北京',
|
||||
|
@ -69,8 +130,8 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (value, selectedData) {
|
||||
this.text = selectedData.map(o => o.label).join(', ');
|
||||
c () {
|
||||
this.value2 = ['jiangsu', 'suzhou', 'zhuozhengyuan']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue