Skip to content

下拉选择框

自定义数据模式

js
<app-select v-model="value" :type="AppSelectType.custom" :data="data"></app-select>

const data = reactive([
  { value: '1', label: '张三' },
  { value: '2', label: '李四' }
])

枚举模式

js
// 其中AppSelectType为枚举值
<app-select v-model="value" :type="AppSelectType.enum" :data="AppSelectType"></app-select>

网络模式

js
// 其中label为要显示的字段名,value为唯一标识字段名
<app-select v-model="value" :type="AppSelectType.network" label="value" value="key" url="/setmeal/setmealtype/getselect"></app-select>

boolean模式

js
<app-select v-model="value" :type="AppSelectType.boolean" true-label="启用" false-label="禁用"></app-select>

数据过滤

当提供的数据,不需要全部显示时,可通过数据过滤方法,来控制要显示的数据

js
<app-select v-model="value" :type="AppSelectType.network" :filter="filter" placeholder="请选择套餐分组" label="value" url="/setmeal/setmealtype/getselect"></app-select>

// 过滤等于代币套餐的数据
const filter = (data: Array<any>) => data.filter(x => x.value !== '代币套餐')

广州宝点数字化科技