<template>
<fish-select v-model="singleSelectedValue">
<fish-option index="false" content="Option-false"></fish-option>
<fish-option index="true" content="Option-true"></fish-option>
<fish-option index="2" content="Option-3"></fish-option>
<fish-option index="3" content="Option-4"></fish-option>
<fish-option index="4" content="Option-5"></fish-option>
</fish-select>
</template>
<script>
export default {
data () { return {singleSelectedValue: false} }
}
</script>
<template>
<fish-select v-model="singleSelectedValue" disabled>
<fish-option index="0" content="Option-1"></fish-option>
<fish-option index="1" content="Option-2"></fish-option>
<fish-option index="2" content="Option-3"></fish-option>
<fish-option index="3" content="Option-4"></fish-option>
<fish-option index="4" content="Option-5"></fish-option>
</fish-select>
</template>
<script>
export default {
data () { return {singleSelectedValue: ''} }
}
</script>
<template>
<fish-select search v-model="singleSelectedValueWthSearch1">
<fish-option index="10" content="abcd"></fish-option>
<fish-option index="11" content="abc"></fish-option>
<fish-option index="12" content="ab"></fish-option>
<fish-option index="13" content="abd"></fish-option>
<fish-option index="14" content="abdf"></fish-option>
</fish-select>
</template>
<script>
export default {
data () { return {singleSelectedValueWthSearch1: ''} }
}
</script>
<template>
<fish-select multiple v-model="multipleValues" style="width: 300px;" @change="changeHandler">
<fish-option index="0" content="abcd"></fish-option>
<fish-option index="1" content="abc"></fish-option>
<fish-option index="2" content="ab"></fish-option>
<fish-option index="3" content="abd"></fish-option>
<fish-option index="4" content="abdf"></fish-option>
<fish-option index="5" content="abdf5"></fish-option>
<fish-option index="6" content="abdf6"></fish-option>
<fish-option index="7" content="abdf7"></fish-option>
</fish-select>
</template>
<script>
export default {
data () { return {multipleValues: []} },
methods: {
changeHandler (values) {
console.log('values:', values)
}
}
}
</script>
<template>
<fish-select search multiple v-model="multipleValues1" style="width: 300px;" @change="changeHandler">
<fish-option index="0" content="abcd"></fish-option>
<fish-option index="1" content="abc"></fish-option>
<fish-option index="2" content="ab"></fish-option>
<fish-option index="3" content="abd"></fish-option>
<fish-option index="4" content="abdf"></fish-option>
<fish-option index="5" content="abdf5"></fish-option>
<fish-option index="6" content="abdf6"></fish-option>
<fish-option index="7" content="abdf7"></fish-option>
</fish-select>
</template>
<script>
export default {
data () { return {multipleValues1: []} },
methods: {
changeHandler (values) {
console.log('values:', values)
}
}
}
</script>
<template>
<fish-row>
<fish-col span="10" style="margin-right: 5px;">
<fish-select search v-model="cascadedValue" @change="changeCascadedHandler">
<fish-option index="0" content="C0"></fish-option>
<fish-option index="1" content="C1"></fish-option>
<fish-option index="2" content="C2"></fish-option>
<fish-option index="3" content="C3"></fish-option>
<fish-option index="4" content="C4"></fish-option>
<fish-option index="5" content="C5"></fish-option>
<fish-option index="6" content="C6"></fish-option>
<fish-option index="7" content="C7"></fish-option>
<fish-option index="8" content="C8"></fish-option>
<fish-option index="9" content="C9"></fish-option>
<fish-option index="10" content="C10"></fish-option>
<fish-option index="11" content="C11"></fish-option>
<fish-option index="12" content="C12"></fish-option>
<fish-option index="13" content="C13"></fish-option>
</fish-select>
</fish-col>
<fish-col span="12">
<fish-select v-model="cascaded2Value">
<fish-option :index="v" :content="v" :key="v" v-for="v in cascaded2Values"></fish-option>
</fish-select>
</fish-col>
</fish-row>
</template>
<script>
export default {
data () {
cascadedValue: '',
cascaded2Value: '',
cascaded2Values: [],
},
methods: {
changeCascadedHandler (v) {
if (v === '1') {
this.cascaded2Values = ['test', 'test1']
} else {
this.cascaded2Values = []
this.cascaded2Value = ''
}
}
}
}
</script><template>
<fish-select v-model="autoCompleteValue" :search="searchChangeHandler">
<fish-option :index="item.index" :content="item.content" v-for="item in autoCompleteData" :key="item.index"></fish-option>
</fish-select>
</template>
<script>
export default {
data () {
return {
autoCompleteValue: '',
autoCompleteData: []
}
},
methods: {
searchChangeHandler (v) {
console.log('v:', v)
this.autoCompleteData = [
{index: `${v}11`, content: `${v}11`},
{index: `${v}12`, content: `${v}12`},
{index: `${v}13`, content: `${v}13`},
{index: `${v}14`, content: `${v}14`},
{index: `${v}15`, content: `${v}15`}
]
}
}
}
</script><template>
<fish-select v-model="autoCompleteMultipleValue" :search="mulitpleSearchChangeHandler" multiple>
<fish-option :index="item.index" :content="item.content" v-for="item in autoCompleteMultipleData" :key="item.index"></fish-option>
</fish-select>
</template>
<script>
export default {
data () {
return {
autoCompleteMultipleValue: [],
autoCompleteMultipleData: []
}
},
methods: {
mulitpleSearchChangeHandler (v) {
console.log('v:', v)
this.autoCompleteMultipleData = [
{index: `${v}11`, content: `${v}11`},
{index: `${v}12`, content: `${v}12`},
{index: `${v}13`, content: `${v}13`},
{index: `${v}14`, content: `${v}14`},
{index: `${v}15`, content: `${v}15`}
]
}
}
}
</script>| {{column}} |
|---|
| {{column}} |
|---|
| {{column}} |
|---|