support Select
support Select
This commit is contained in:
梁灏
parent
47a7f21dc6
commit
4aec6a66bb
9 changed files with 343 additions and 143 deletions
|
|
@ -43,6 +43,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
|
|||
<li><router-link to="/menu">Menu</router-link></li>
|
||||
<li><router-link to="/spin">Spin</router-link></li>
|
||||
<li><router-link to="/cascader">Cascader</router-link></li>
|
||||
<li><router-link to="/select">Select</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
|
|
|
|||
|
|
@ -136,6 +136,10 @@ const router = new VueRouter({
|
|||
{
|
||||
path: '/cascader',
|
||||
component: require('./routers/cascader.vue')
|
||||
},
|
||||
{
|
||||
path: '/select',
|
||||
component: require('./routers/select.vue')
|
||||
}
|
||||
]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,70 +1,246 @@
|
|||
<!--<template>-->
|
||||
<!--<div>-->
|
||||
<!--<i-select v-model="model1" style="width:200px" clearable>-->
|
||||
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--{{ model1 }}-->
|
||||
<!--<div @click="c">change</div>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--cityList: [-->
|
||||
<!--{-->
|
||||
<!--value: 'beijing',-->
|
||||
<!--label: '北京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shanghai',-->
|
||||
<!--label: '上海市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shenzhen',-->
|
||||
<!--label: '深圳市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'hangzhou',-->
|
||||
<!--label: '杭州市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'nanjing',-->
|
||||
<!--label: '南京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'chongqing',-->
|
||||
<!--label: '重庆市'-->
|
||||
<!--}-->
|
||||
<!--],-->
|
||||
<!--model1: ''-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--methods: {-->
|
||||
<!--c () {-->
|
||||
<!--this.model1 = 'hangzhou'-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
|
||||
<!--<template>-->
|
||||
<!--<div>-->
|
||||
<!--<i-select v-model="model5" disabled style="width:200px">-->
|
||||
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--<i-select v-model="model6" style="width:200px">-->
|
||||
<!--<i-option value="beijing">北京市</i-option>-->
|
||||
<!--<i-option value="shanghai" disabled>上海市</i-option>-->
|
||||
<!--<i-option value="shenzhen">深圳市</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--cityList: [-->
|
||||
<!--{-->
|
||||
<!--value: 'beijing',-->
|
||||
<!--label: '北京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shanghai',-->
|
||||
<!--label: '上海市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shenzhen',-->
|
||||
<!--label: '深圳市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'hangzhou',-->
|
||||
<!--label: '杭州市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'nanjing',-->
|
||||
<!--label: '南京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'chongqing',-->
|
||||
<!--label: '重庆市'-->
|
||||
<!--}-->
|
||||
<!--],-->
|
||||
<!--model5: '',-->
|
||||
<!--model6: ''-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
|
||||
|
||||
<!--<template>-->
|
||||
<!--<div>-->
|
||||
<!--<i-select v-model="model7" style="width:200px">-->
|
||||
<!--<Option-group label="热门城市">-->
|
||||
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
|
||||
<!--</Option-group>-->
|
||||
<!--<Option-group label="其它城市">-->
|
||||
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
|
||||
<!--</Option-group>-->
|
||||
<!--</i-select>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--cityList: [-->
|
||||
<!--{-->
|
||||
<!--value: 'beijing',-->
|
||||
<!--label: '北京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shanghai',-->
|
||||
<!--label: '上海市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shenzhen',-->
|
||||
<!--label: '深圳市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'hangzhou',-->
|
||||
<!--label: '杭州市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'nanjing',-->
|
||||
<!--label: '南京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'chongqing',-->
|
||||
<!--label: '重庆市'-->
|
||||
<!--}-->
|
||||
<!--],-->
|
||||
<!--model7: ''-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
<!--<template>-->
|
||||
<!--<div>-->
|
||||
<!--<i-select v-model="model10" multiple style="width:260px">-->
|
||||
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--cityList: [-->
|
||||
<!--{-->
|
||||
<!--value: 'beijing',-->
|
||||
<!--label: '北京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shanghai',-->
|
||||
<!--label: '上海市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shenzhen',-->
|
||||
<!--label: '深圳市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'hangzhou',-->
|
||||
<!--label: '杭州市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'nanjing',-->
|
||||
<!--label: '南京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'chongqing',-->
|
||||
<!--label: '重庆市'-->
|
||||
<!--}-->
|
||||
<!--],-->
|
||||
<!--model10: []-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
<template>
|
||||
<Row>
|
||||
<i-col span="12" style="padding-right:10px">
|
||||
<i-select :model.sync="model111" filterable>
|
||||
<i-option v-for="item in cityList1" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Row>
|
||||
<i-col span="12" style="padding-right:10px">
|
||||
<i-select :model.sync="model112" filterable>
|
||||
<i-option v-for="item in cityList2" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Row>
|
||||
<i-col span="12">
|
||||
<i-select :model.sync="model12" filterable multiple>
|
||||
<i-option v-for="item in cityList1" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
</Row>
|
||||
<div>
|
||||
<Row>
|
||||
<i-col span="12" style="padding-right:10px">
|
||||
<i-select v-model="model11" filterable>
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
<i-col span="12">
|
||||
<i-select v-model="model12" filterable multiple>
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
</Row>
|
||||
<div @click="model11 = 'shanghai'">change</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const cityList = [
|
||||
{
|
||||
value: 'beijing',
|
||||
label: '北京市'
|
||||
},
|
||||
{
|
||||
value: 'shanghai',
|
||||
label: '上海市'
|
||||
},
|
||||
{
|
||||
value: 'shenzhen',
|
||||
label: '深圳市'
|
||||
},
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: '杭州市'
|
||||
},
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: '南京市'
|
||||
},
|
||||
{
|
||||
value: 'chongqing',
|
||||
label: '重庆市'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cityList1: cityList,
|
||||
model111: '',
|
||||
|
||||
cityList2: [],
|
||||
model112: 'beijing',
|
||||
|
||||
cityList: [
|
||||
{
|
||||
value: 'beijing',
|
||||
label: '北京市'
|
||||
},
|
||||
{
|
||||
value: 'shanghai',
|
||||
label: '上海市'
|
||||
},
|
||||
{
|
||||
value: 'shenzhen',
|
||||
label: '深圳市'
|
||||
},
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: '杭州市'
|
||||
},
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: '南京市'
|
||||
},
|
||||
{
|
||||
value: 'chongqing',
|
||||
label: '重庆市'
|
||||
}
|
||||
],
|
||||
model11: '',
|
||||
model12: []
|
||||
}
|
||||
},
|
||||
ready() {
|
||||
this.model111 = 'hangzhou'
|
||||
setTimeout(()=>{
|
||||
this.cityList2 = cityList
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue