1111

src/views/home/modules/select.vue

@@ -1,14 +1,19 @@
 <template>
     <div class="hc-datav-select-main">
         <div class="hc-datav-select-name">{{ name || placeholder }}</div>
-        <el-select v-model="value" popper-class="hc-datav-select-popper" :placeholder="placeholder" size="small" :clearable="clearable" :disabled="disabled" @change="selectChange">
+        <el-select
+            v-model="selectKey" popper-class="hc-datav-select-popper"
+            :placeholder="placeholder" size="small" :clearable="clearable" :disabled="disabled"
+            placement="bottom-end"
+            @change="selectChange"
+        >
             <el-option v-for="item in data" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
     </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { isNullES } from 'js-fast-way'
 
 const props = defineProps({
@@ -34,10 +39,14 @@ const props = defineProps({
 const emit = defineEmits(['change'])
 
 //双向绑定
-const value = defineModel('modelValue', {
+const selectKey = defineModel('modelValue', {
     default: '',
 })
 
+onMounted(() => {
+    name.value = getDataNmae(selectKey.value)
+})
+
 //监听数据变化
 const data = ref(props.datas)
 watch(() => props.datas, (val) => {
@@ -46,7 +55,7 @@ watch(() => props.datas, (val) => {
 
 //监听值变化
 const name = ref('')
-watch(() => value, (val) => {
+watch(() => selectKey, (val) => {
     name.value = getDataNmae(val.value)
 })
 
@@ -118,6 +127,6 @@ const selectChange = (id) => {
     }
 }
 .hc-datav-select-main + .hc-datav-select-main {
-    margin-left: 20px;
+    margin-left: 40px;
 }
 </style>