sf-select 下拉选择

当选项过多时，使用下拉菜单展示并选择内容。

基本用法

:::ysfdoc 列表以 id 作为主键

  <template>
    <sf-select>
        <sf-option v-for="option in options" :id="option.id" :name="option.name" :disabled="option.disabled">
    </sf-select>
  </template>

  <script>
    export default {
      data() {
        return {
            options:[
              {id: 0, name: '网易云'},
              {id: 1, name: '网易七鱼'},
              {id: 2, name: '网易云信'},
              {id: 3, name: '网易蜂巢'},
              {id: 4, name: '网易易盾'}
            ]
        }
      }
    }
  </script>

:::

默认选中

:::ysfdoc 设置sf-select的defid属性，则默认选中对应项

  <template>
    <sf-select :defid="1">
        <sf-option v-for="option in options" :id="option.id" :name="option.name" :disabled="option.disabled">
    </sf-select>
  </template>

  <script>
    export default {
      data() {
        return {
            options:[
              {id: 0, name: '网易云'},
              {id: 1, name: '网易七鱼'},
              {id: 2, name: '网易云信'},
              {id: 3, name: '网易蜂巢'},
              {id: 4, name: '网易易盾'}
            ]
        }
      }
    }
  </script>

:::

禁用状态

:::ysfdoc 设置sf-select的disabled属性为true，禁用整个组件

  <template>
    <sf-select :disabled=true>
        <sf-option v-for="option in options" :id="option.id" :name="option.name" :disabled="option.disabled">
    </sf-select>
  </template>

  <script>
    export default {
      data() {
        return {
            options:[
              {id: 0, name: '网易云'},
              {id: 1, name: '网易七鱼'},
              {id: 2, name: '网易云信'},
              {id: 3, name: '网易蜂巢'},
              {id: 4, name: '网易易盾'}
            ]
        }
      }
    }
  </script>

:::

禁用单个选项

:::ysfdoc 设置sf-option的disabled属性为true，禁用该选项

  <template>
    <sf-select>
        <sf-option v-for="option in options1" :id="option.id" :name="option.name" :disabled="option.disabled">
    </sf-select>
  </template>

  <script>
    export default {
      data() {
        return {
          options:[
            {id: 0, name: '网易云'},
            {id: 1, name: '网易七鱼'},
            {id: 2, name: '网易云信'},
            {id: 3, name: '网易蜂巢'},
            {id: 4, name: '网易易盾'}
          ],
          options1:[
            {id: 0, name: '网易云'},
            {id: 1, name: '网易七鱼', disabled: true},
            {id: 2, name: '网易云信'},
            {id: 3, name: '网易蜂巢'},
            {id: 4, name: '网易易盾'}
          ]
        }
      }
    }
  </script>

:::

自定义模板

:::ysfdoc 通过slot方式可自定义单个选项的html模板

  <template>
    <sf-select>
        <sf-option v-for="option in options" :id="option.id" :name="option.name" :disabled="option.disabled">
          <span>{{option.name}}</span>
          <span style="color: #d3dce6; margin-left: 10px;">{{option.des}}</span>
        </sf-option>
    </sf-select>
  </template>

  <script>
    export default {
      data() {
        return {
          options:[
            {id: 0, name: '网易云', des: 'cloud'},
            {id: 1, name: '网易七鱼', des: 'qiyu'},
            {id: 2, name: '网易云信', des: 'yunxin'},
            {id: 3, name: '网易蜂巢', des:'fc'},
            {id: 4, name: '网易易盾', des: 'edun'}
          ],
          options1:[
            {id: 0, name: '网易云'},
            {id: 1, name: '网易七鱼', disabled: true},
            {id: 2, name: '网易云信'},
            {id: 3, name: '网易蜂巢'},
            {id: 4, name: '网易易盾'}
          ]
        }
      }
    }
  </script>

:::

Select Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | defid | 默认选中项id | [Number, String] | — | — | | title | 未设置默认选中项时的占位符 | String | — | 请选择 | | disabled | 是否禁用 | boolean | true, false | false |

Select Events

| 事件 | 说明 | 回调参数 | |---------- |-------- |----------| | change | 选中项变化 | 目标选中项 | | toggle | 下拉框展开/收起 | 展开为true，收起为false |

Select Methods

| 方法 | 说明 | 参数 | |---------- |-------- |----------| | select | 选中某一项 | 目标选中项 | | toggle | 展开/收起下拉框 | 展开为true，收起为false |

Option Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | id | 选项id，主键 | [Number, String] | — | — | | name | 选项名称 | String | — | — | | disabled | 是否禁用 | boolean | true, false | false |