Ver código fonte

表单组件下拉框选项名支持传入函数

@dongkboy 1 mês atrás
pai
commit
661c56506a
1 arquivos alterados com 10 adições e 2 exclusões
  1. 10 2
      src/components/SearchForm/index.vue

+ 10 - 2
src/components/SearchForm/index.vue

@@ -9,11 +9,12 @@
             :placeholder="field.placeholder" clearable class="el-inputs" />
           <component v-else-if="field.type === 'select'" is="el-select" v-model="formInline[field.model]"
             :placeholder="field.placeholder" clearable class="el-inputs" v-bind="field">
-            <el-option v-for="(item, index) in field.options" :key="index" :label="item[field.props?.label || 'label']"
+            <el-option v-for="(item, index) in field.options" :key="index"
+              :label="getOptionLabel(item, field.props?.label)"
               :value="item[field.props?.value || 'value']">
               <template #default="scope">
                 <slot :name="`${field.model}-option`" :item="item">
-                  {{ item[field.props?.label || 'label'] }}
+                  {{ getOptionLabel(item, field.props?.label) }}
                 </slot>
               </template>
             </el-option>
@@ -123,6 +124,13 @@ const handleSearch = () => {
 const handleReset = () => {
   props.onReset(); // 调用父组件的重置事件
 };
+
+// 解析下拉选项的显示文本,兼容字符串字段名、数组(按空格拼接)、函数三种形式
+const getOptionLabel = (item: any, label: any): string => {
+  if (typeof label === 'function') return label(item);
+  if (Array.isArray(label)) return label.map((k: string) => item[k]).join(' ');
+  return item[label || 'label'];
+};
 </script>
 <style lang="scss">
 .el-inputs {