更新radio、select

examples/src/App.vue

@@ -124,7 +124,7 @@
           </template>
         </DevicePreview>
       </section>
-      <section>
+      <section class="demo-section">
         <h2>单选框组件集合</h2>
         <div class="ele-item">
           <label for="">单选框(对象格式)：</label>
@@ -134,7 +134,8 @@
         <div class="ele-item">
           <label for="">单选框2（数组格式 + 自定义取值）：</label>
           <GuipRadio v-model="form.language" :options="languageOptions1" label="自定义属性" prop="language"
-            @change="radioChange" :rules="rules.language" label-key="name" :disabledKeys="['1']" value-key="id" />
+            selectedLabelKey="selectedLabel" @change="radioChange" :rules="rules.language" label-key="name"
+            :disabledKeys="['1']" value-key="id" />
         </div>
         <div class="ele-item">
           <label for="">单选框：</label>
@@ -152,6 +153,16 @@
         </div>
       </section>
 
+      <section class="demo-section">
+        <h2>下拉展开组件集合</h2>
+        <div class="ele-item">
+          <label for="">下拉框：</label>
+          <!-- :extraItem="{label:'全部',value:'99999'}" 传入必须是 label、value； 组件内会自动改为自定义的 labelKey、valueKey-->
+          <GuipSelect width="600px" v-model="form.card" clearable label="卡片" :default-value="form.card"
+            @change="selectChangeTest" prop="card" :options="options" valueKey="id1" labelKey="id2"
+            :extraItem="{ label: '全部', value: '99999' }" />
+        </div>
+      </section>
     </el-form>
 
   </div>
@@ -496,6 +507,9 @@ export default {
     }
   },
   methods: {
+    selectChangeTest(val) {
+      console.log(val, 'select-----选中的');
+    },
     // 手动copy内容
     handleClickCopy() {
       this.$copy(this.form.input1, {

packages/GuipRadio/src/index.vue

@@ -23,6 +23,10 @@ export default {
       type: Boolean,
       default: false
     },
+    selectedLabelKey: {
+      type: String,
+      default: ''
+    },
     // 选项列表，支持多种格式:
     // 1. 数组格式: [{ label: '显示文本', value: '值', disabled: false }]
     // 2. 对象格式: { key1: 'value1', key2: 'value2' }
@@ -131,7 +135,13 @@ export default {
         return option.value;
       }
 
-      return option[this.labelKey] || option;
+      // 当前选项是否选中
+      const isSelected = this.getValue(option) === this.selectedValue;
+      
+      // 选中状态下优先返回selectedLabel，其次返回labelKey指定的属性
+      return isSelected && option[this.selectedLabelKey] 
+        ? option[this.selectedLabelKey] 
+        : option[this.labelKey] || option;
     },
     getValue(option) {
       // 处理对象格式的选项

packages/GuipSelect/index.js

@@ -0,0 +1,7 @@
+import GuipSelect from './src/index.vue'
+
+GuipSelect.install = function(Vue) {
+  Vue.component(GuipSelect.name || 'GuipSelect', GuipSelect)
+}
+
+export default GuipSelect

packages/GuipSelect/src/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-form-item :style="{ ...style, height: height, ...styleObject }" :required="required"
+    :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']"
+    :label="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">
+      <el-option v-for="item in processedOptions" :key="getItemValue(item)" :label="getItemLabel(item)"
+        :disabled="item.disabled" :value="getItemValue(item)">
+      </el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+export default {
+  name: 'GuipSelect',
+  props: {
+    value: [String, Number, Array],
+    options: {
+      type: Array,
+      default: () => []
+    },
+    // 新增配置字段
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    labelKey: {
+      type: String,
+      default: 'label'
+    },
+     // 新增动态添加项的配置
+    extraItem: {
+      type: Object,
+      default: null
+    },
+    styleObject: Object,
+    disabled: Boolean,
+    required: Boolean,
+    defaultValue: [String, Number, Array],
+    placeholder: String,
+    width: String,
+    height: String,
+    label: String,
+    type: String,
+    prop: String,
+    rules: [Object, Array],
+    column: Boolean,
+    addClass: String,
+    desc: String
+  },
+  data() {
+    return {
+      selectedValue: '',
+      style: {},
+      placeholder1: '请选择',
+    }
+  },
+  computed: {
+    // 处理options为空的情况
+    processedOptions() {
+      let options = this.options || [];
+      // 当extraItem存在且不是空对象时，添加到options数组开头
+      if (this.extraItem && Object.keys(this.extraItem).length > 0) {
+        return [
+          {
+            [this.labelKey]: this.extraItem.label || '',
+            [this.valueKey]: this.extraItem.value || '',
+            disabled: this.extraItem.disabled || false
+          },
+          ...options
+        ];
+      }
+      return options;
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.selectedValue = newVal
+    },
+    defaultValue(newVal) {
+      if (newVal !== undefined && newVal !== null) {
+        this.selectedValue = newVal
+      }
+    }
+  },
+  mounted() {
+    // 默认值赋值
+    if (this.defaultValue !== undefined && this.defaultValue !== null) {
+      this.selectedValue = this.defaultValue
+    }
+    if (this.value !== undefined && this.value !== null) {
+      this.selectedValue = this.value
+    }
+    // 默认提示语
+    if (this.placeholder) {
+      this.placeholder1 = this.placeholder
+    }
+    this.$nextTick(() => {
+      let els = document.querySelectorAll('.el-input');
+      els.forEach(item => {
+        item.onmouseover = function () {
+          item.classList.add("hoverclass")
+        }
+        item.onmouseout = function () {
+          item.classList.remove("hoverclass")
+        }
+    
+      })
+    })
+  },
+  methods: {
+    // 获取value值
+    getItemValue(item) {
+      return item[this.valueKey]
+    },
+    // 获取label值
+    getItemLabel(item) {
+      return item[this.labelKey]
+    },
+    handleChange(value) {
+      this.$emit('input', value)
+      this.$emit('change', value)
+    }
+  }
+}
+</script>

packages/index.js

@@ -5,6 +5,7 @@ import PromptText from './PromptText'
 import GuipTextarea from './GuipTextarea'
 import DevicePreview from './DevicePreview'
 import GuipRadio from './GuipRadio'
+import GuipSelect from './GuipSelect'
 import 'element-ui/lib/theme-chalk/index.css' // 如果依赖Element
 import './styles/index.css' // 全局引入
 import './styles/common.scss' // 全局引入
@@ -16,7 +17,8 @@ const components = [
   PromptText,
   GuipTextarea,
   DevicePreview,
-  GuipRadio
+  GuipRadio,
+  GuipSelect
 ]
 
 const install = function (Vue) {
@@ -36,5 +38,6 @@ export default {
   PromptText,
   GuipTextarea,
   DevicePreview,
-  GuipRadio
+  GuipRadio,
+  GuipSelect
 }

packages/styles/common.scss

@@ -40,9 +40,11 @@ body {
     text-align: left;
 }
 /* 隐藏全局滚动条 */
-::-webkit-scrollbar {
+/* 全局隐藏滚动条但排除el-table */
+*:not(.el-table)::-webkit-scrollbar {
     display: none;
   }
+  
   body {
     scrollbar-width: none;
     -ms-overflow-style: none;
@@ -56,6 +58,17 @@ body {
 .element::-webkit-scrollbar {
     display: none; /* Chrome, Safari, Edge */
 }
+
+.el-table__body-wrapper::-webkit-scrollbar {
+    display: block !important;
+    width: 6px;
+    height: 6px;
+  }
+  .el-table__body-wrapper::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+  }
+  
 .common_title{
     font-weight: bold;
     letter-spacing: 0.08em;
@@ -174,14 +187,14 @@ body {
     div {
         width: 16px;
         height: 16px;
-        background-image: url('../assets/addIcon.svg');
+        background-image: url(../assets/addIcon.svg);
         margin-right: 12px;
     }
 
     &:hover {
         transition: all .3s;
         div {
-            background-image: url('../assets/addIcon_light.svg');
+            background-image: url(../assets/addIcon_light.svg);
         }
 
         border-color: #006AFF;
@@ -647,10 +660,9 @@ body {
 
 // textarea start
 .el-textarea__inner {
-    padding: 10px 12px 30px;
+    padding: 10px 12px;
     border-radius: 2px;
     height: 100% !important;
-    font-family: Microsoft YaHei UI;
 }
 
 .el-textarea__inner:hover {
@@ -672,8 +684,9 @@ body {
 
 .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label::after,
 .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::after {
-    content: url('../assets/require.svg');
+    content: url(../assets/require.svg);
     display: inline-block;
+    // background-image: url(../../assets/require.svg);
     color: #ff4d4f;
     margin-right: 4px;
     margin-left: 4px;