显示已选中信息

components/FilterList/index.vue

@@ -1,12 +1,12 @@
 <template>
   <view class="labelColor itemBox" style="height: 45px;">
-    <view class="item" v-for="(item, index) in filterList" :key="item[props.idValue]" :style="`margin-left: ${index ? '10rpx' : '0'}`">
+    <view class="item" v-for="(item, index) in filterList" :key="item[props.idValue]" :style="`margin: ${index ? '0 12rpx' : '0 12rpx 0 8rpx'}`">
       <!-- v-slot:default="{ data, error }" -->
       <uni-data-picker
-        ref="picker"
+        ref="pickerRef"
+        v-model="item.value"
         v-slot:default="{ error }"
-        :localdata="item.array" 
-        :clear-icon="true"
+        :localdata="item.array"
         :popup-title="'请选择' + item[labelValue]" 
         :map="item.map || { text: 'label', value: 'value' }"
         @change="e => handleClick(e, item)"
@@ -15,12 +15,18 @@
         <view v-if="error" class="error">
           <text>{{error}}</text>
         </view>
-        <view v-else>
-          <text :class="{'defaultLink': item.value }">{{ item.text || item[labelValue] }}</text>
+        <view v-else class="d-flex">
+          <view
+            class="selectText"
+            :style="`max-width: ${item.value? '100rpx' : '120rpx'}; color: ${item.value? '#008978' : ''}`"
+          >
+            {{ item[labelValue] }}
+            <!-- {{ item.text || item[labelValue] }} -->
+          </view>
           <uni-icons v-if="!item.value" type="icon-arrow-sortdown-smal" custom-prefix="iconfont" color="#999"/>
         </view>
       </uni-data-picker>
-      <uni-icons v-if="item.value" class="marginT2" type="closeempty" size="16" color="#999" @click="handleClear(item)"></uni-icons>
+      <uni-icons v-if="item.value" class="marginT2" type="closeempty" size="16" color="#999" @click="handleClear(item, index)"></uni-icons>
     </view>
   </view>
 </template>
@@ -40,7 +46,7 @@ const props = defineProps({
   lazy: { type: Boolean, default: false },
 })
 
-const picker = ref()
+const pickerRef = ref()
 const handleClick = (e, item) => {
   const obj = e.detail.value?.length ? e.detail.value[e.detail.value.length-1] : {}
   //
@@ -49,9 +55,10 @@ const handleClick = (e, item) => {
   emit('change', item.key, item.value)
 }
 
-const handleClear = (item) => {
+const handleClear = (item, index) => {
   item.value = null
   item.text = null
+  // pickerRef.value[index]?.clear()
   emit('change', item.key, item.value)
 }
 
@@ -75,6 +82,7 @@ const filterList = ref([])
 watch(() => props.list, 
   (newVal) => {
     filterList.value = newVal ? [...newVal] : []
+    filterList.value.forEach(e => e.value = null)
     if (filterList.value.length && !props.lazy) setItemSelectData()
   },
   { immediate: true }
@@ -89,14 +97,19 @@ watch(() => props.list,
   width: 100%;
   display: flex;
   justify-content: space-between;
-  flex-wrap: wrap;
+  // flex-wrap: wrap;
+  padding: 0 5rpx;
   .item {
     // width: 20%;
+    // max-width: 20%;
     display: flex;
     align-items: center;
     font-size: 14px;
-    flex-wrap: wrap;
-    // margin: 0 3px;
+    // flex-wrap: wrap;
+    .selectText {
+      white-space: nowrap;
+      overflow: hidden;
+    }
   }
 }
 .popup {