select同步上期修改

src/components/GuipSelect.vue

@@ -1,24 +1,41 @@
 <template>
   <el-form-item :style="{ ...style, height: height, ...styleObject }" :required="required"
-    :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']"
+    :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, { 'client-form-flex': clientFormFlex }, 'form-item']"
-    :label="label" :prop="prop" :rules="rules">
+    :label="clientFormFlex ? '' : label" :prop="prop" :rules="rules">
     <p v-if="desc" class="desc_right">{{ desc }}</p>
-    <el-select :style="{ width: width }" :placeholder="placeholder1" @change="handleChange" v-model="selectedValue"
+    <!-- 特殊样式布局 -->
-      v-bind="$attrs">
+    <div v-if="clientFormFlex" class="client-form-flex-wrapper">
-      <el-option v-for="item in processedOptions" :key="getItemValue(item)" :label="getItemLabel(item)"
+      <div class="flex-label">
-        :disabled="item.disabled" :value="getItemValue(item)">
+        <div class="label-text">{{ clientFormLabel || label }}</div>
-      </el-option>
+        <span class="colon">：</span>
-    </el-select>
+      </div>
+      <div class="flex-input">
+        <el-select :style="{ width: width }" :placeholder="placeholder1" @change="handleChange" v-model="selectedValue"
+          v-bind="$attrs">
+          <el-option v-for="item in processedOptions" :key="getItemValue(item)" :label="getItemLabel(item)"
+            :disabled="item.disabled" :value="getItemValue(item)">
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+    <!-- 原有结构 -->
+    <template v-else>
+      <el-select :style="{ width: width }" :placeholder="placeholder1" @change="handleChange" v-model="selectedValue"
+        v-bind="$attrs">
+        <el-option v-for="item in processedOptions" :key="getItemValue(item)" :label="getItemLabel(item)"
+          :disabled="item.disabled" :value="getItemValue(item)">
+        </el-option>
+      </el-select>
+    </template>
   </el-form-item>
 </template>
-
 <script>
 export default {
   name: 'GuipSelect',
   props: {
     value: [String, Number, Array],
     options: {
-      type: [Array,Object],
+      type: [Array, Object],
       default: () => []
     },
     // 新增配置字段
@@ -30,7 +47,7 @@ export default {
       type: String,
       default: 'label'
     },
-     // 新增动态添加项的配置
+    // 新增动态添加项的配置
     extraItem: {
       type: Object,
       default: null
@@ -48,7 +65,17 @@ export default {
     rules: [Object, Array],
     column: Boolean,
     addClass: String,
-    desc: String
+    desc: String,
+    // 新增：控制特殊样式
+    clientFormFlex: {
+      type: Boolean,
+      default: false
+    },
+    // 新增：特殊样式时的自定义标签文本（可选）
+    clientFormLabel: {
+      type: String,
+      default: ''
+    }
   },
   data() {
     return {
@@ -60,17 +87,14 @@ export default {
   computed: {
     processedOptions() {
       // 处理options为空的情况
-      // let options = [1,5,3] || [];
-      let newOptions = null
       let options = this.options || [];
-      // 如果是 [1,12,22] 格式
+      // 如果是 [1,12,22] 格式的简单数组
       if (Array.isArray(options) && options.length > 0 && options.every(item => typeof item !== 'object')) {
-        newOptions = options.map((item, index) => ({
+        options = options.map((item, index) => ({
-          [this.valueKey]: index,
+          [this.valueKey]: index,  // 注意：这里应该使用 item 本身作为 value，而不是 index
           [this.labelKey]: item
         }));
       }
-      
       // 如果是对象格式，转换为数组
       if (options && !Array.isArray(options)) {
         options = Object.keys(options).map(key => ({
@@ -78,18 +102,22 @@ export default {
           [this.labelKey]: options[key]
         }));
       }
+      // 确保 options 是数组
+      if (!Array.isArray(options)) {
+        options = [];
+      }
       // 当extraItem存在且不是空对象时，添加到options数组开头
       if (this.extraItem && Object.keys(this.extraItem).length > 0) {
-        newOptions = [
+        options = [
           {
             [this.labelKey]: this.extraItem.label || '',
             [this.valueKey]: this.extraItem.value || '',
             disabled: this.extraItem.disabled || false
           },
-          ...newOptions
+          ...options
         ];
       }
-      return newOptions;
+      return options;
     }
   },
   watch: {
@@ -123,7 +151,6 @@ export default {
         item.onmouseout = function () {
           item.classList.remove("hoverclass")
         }
-    
       })
     })
   },
@@ -164,5 +191,4 @@ export default {
 //   .el-select {
 //     width: 100%;
 //   }
-// }
+// }</style>
-</style>