CSelect 下拉选择组件

功能说明

CSelect 是一个下拉选择组件，用于在表单中提供选项选择功能。组件支持两种选择模式：下拉选择模式和跳转页面选择模式。

引用方式

import { CSelect } from '@components/forms/select';

组件参数

• itemRes (Object，必填)：表单数据资源对象，表单组件内部机制专用
• options (Array，必填)：选择菜单选项数组，每个选项应包含 name 和 value/id 属性
• placeholder (String，可选)：输入框占位提示文本
• readOnly (Boolean，可选)：只读模式，默认为 false
• selectByPage (String，可选)：开启选择菜单跳转选择页面模式，值为 'on'
• onOpenSelectorPage (Function，可选)：页面跳转模式下，发起选择的回调函数

使用示例

基础用法（下拉选择模式）

<template>
  <CForm :form="form">
    <CFormItem name="gender" label="性别">
      <CSelect :options="genderOptions" placeholder="请选择性别" />
    </CFormItem>
  </CForm>
</template>

<script>
import { CForm, CFormItem } from '@components/forms/form';
import { CSelect } from '@components/forms/select';

export default {
  components: {
    CForm,
    CFormItem,
    CSelect
  },
  data() {
    return {
      form: {
        gender: ''
      },
      genderOptions: [
        { name: '男', value: 'male' },
        { name: '女', value: 'female' }
      ]
    };
  }
};
</script>

跳转页面选择模式

<template>
  <CForm :form="form">
    <CFormItem name="city" label="城市">
      <CSelect 
        selectByPage="on" 
        :onOpenSelectorPage="handleOpenCitySelector" 
        placeholder="请选择城市" 
      />
    </CFormItem>
  </CForm>
</template>

<script>
import { CForm, CFormItem } from '@components/forms/form';
import { CSelect } from '@components/forms/select';

export default {
  components: {
    CForm,
    CFormItem,
    CSelect
  },
  data() {
    return {
      form: {
        city: ''
      }
    };
  },
  methods: {
    handleOpenCitySelector() {
      // 跳转到城市选择页面
      this.$router.push({
        path: '/pages/city-selector/index',
        query: {
          callback: 'onCitySelected'
        }
      });
      
      // 在全局注册回调函数，用于接收选择结果
      this.$app.onCitySelected = (city) => {
        this.form.city = city.value;
      };
    }
  }
};
</script>

只读模式

<CFormItem name="gender" label="性别">
  <CSelect 
    :options="genderOptions" 
    placeholder="请选择性别" 
    :readOnly="true" 
  />
</CFormItem>

注意事项

1. 组件支持两种选项数据格式：

• 使用 value 作为选项值：{ name: '选项名', value: '选项值' }
• 使用 id 作为选项值：{ name: '选项名', id: '选项值' }

1. 当选项数量较多时，建议使用跳转页面选择模式（selectByPage="on"）
2. 在跳转页面选择模式下，需要提供 onOpenSelectorPage 回调函数来处理页面跳转逻辑
3. 注意：URL 跳转模式已废弃，不再支持直接传入 URL 字符串作为 selectByPage 的值
4. 在只读模式下，下拉箭头图标将被隐藏，且无法触发选择操作