| 1 | # 选择查找
|
| 2 |
|
| 3 | :::kview
|
| 4 |
|
| 5 | ```html
|
| 6 | <template>
|
| 7 | <k-select-search :options="keyOption" v-model="searchObj" />
|
| 8 | <div class="select-text">
|
| 9 | 当前搜索对象 searchObj: {{searchObj}}
|
| 10 | </div>
|
| 11 | </template>
|
| 12 |
|
| 13 | <script>
|
| 14 |
|
| 15 | export default {
|
| 16 | data() {
|
| 17 | return {
|
| 18 | keyOption: [
|
| 19 | {
|
| 20 | key: "",
|
| 21 | label: "全部",
|
| 22 | },
|
| 23 | {
|
| 24 | key: "condition1",
|
| 25 | label: "黄金糕",
|
| 26 | },
|
| 27 | {
|
| 28 | key: "condition2",
|
| 29 | label: "双皮奶",
|
| 30 | },
|
| 31 | ],
|
| 32 | searchObj: {
|
| 33 |
|
| 34 | },
|
| 35 | }
|
| 36 | },
|
| 37 | }
|
| 38 | </script>
|
| 39 |
|
| 40 | <style>
|
| 41 | .select-text{
|
| 42 | padding:10px;
|
| 43 | }
|
| 44 | </style>
|
| 45 | ```
|
| 46 |
|
| 47 | :::
|
| 48 |
|
| 49 |
|
| 50 | ## Props
|
| 51 |
|
| 52 | <div class="markdown-table">
|
| 53 |
|
| 54 | | 参数 | 说明 | 类型 | 默认值| 是否必须|
|
| 55 | |-------|---------|------|--------|----------|
|
| 56 | |size|尺寸（normal、small、mini）|string|normal|-
|
| 57 | |v-model|双向绑定，当前选项数据|选项key为truthy则为对应选项的key和输入内容组成的对象{key:"输入内容"}， 选项key为falsy 则为对应输入的字符串|-|-
|
| 58 | |options|下拉选项|Array\<object\>|-|-
|
| 59 | |preWidth|下拉选择框宽度 |Number （unit: px）|120|-
|
| 60 |
|
| 61 | </div>
|