文件选择器多选图片情况下无法删除图片

web/src/components/fileSelector/index.vue

@@ -11,8 +11,14 @@
 
         <div v-if="props.inputType === 'image' && props.multiple"
           style="width: 100%; display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px;">
-          <el-image v-for="item, index in (data || [])" :src="item" :key="index" fit="scale-down" class="itemList"
+          <div v-for="item, index in (data || [])" style="position: relative;"
+            :style="{ width: props.inputSize + 'px', height: props.inputSize + 'px' }">
+            <el-image :src="item" :key="index" fit="scale-down" class="itemList"
               :style="{ width: props.inputSize + 'px', aspectRatio: '1 / 1' }" />
+            <el-icon v-show="(!!data && !props.disabled)" class="closeHover" :size="16" @click="clearOne(item)">
+              <Close />
+            </el-icon>
+          </div>
           <div style="position: relative;" :style="{ width: props.inputSize + 'px', height: props.inputSize + 'px' }">
             <div
               style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
@@ -22,10 +28,6 @@
             </div>
             <div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
               :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
-            <el-icon v-show="(!!data && !props.disabled) && !props.multiple" class="closeHover" :size="16"
-              @click="clear">
-              <Close />
-            </el-icon>
           </div>
         </div>
         <div v-if="props.inputType === 'image' && !props.multiple" class="form-display" style="position: relative;"
@@ -350,8 +352,12 @@ const clearState = () => {
   // all数据不能清，因为all只会在挂载的时候赋值一次
   // listAllData.value = [];
 };
-const clear = () => { data.value = null; onDataChange(null); }
+const clear = () => { data.value = null; onDataChange(null); };
-
+const clearOne = (item: any) => {
+  let _l = (JSON.parse(JSON.stringify(data.value)) as any[]).filter((i:any)=> i !== item)
+  data.value = _l;
+  onDataChange(_l);
+};
 
 // 网络文件部分
 const netLoading = ref<boolean>(false);

web/src/views/system/fileList/crud.tsx

@@ -228,26 +228,26 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
             show: false
           }
         },
-        fileselectortest: {
+        // fileselectortest: {
-          title: '文件选择器测试',
+        //   title: '文件选择器测试',
-          type: 'file-selector',
+        //   type: 'file-selector',
-          column: {
+        //   column: {
-            minWidth: 200
+        //     minWidth: 200
-          },
+        //   },
-          form: {
+        //   form: {
-            component: {
+        //     component: {
-              name: fileSelector,
+        //       name: fileSelector,
-              vModel: 'modelValue',
+        //       vModel: 'modelValue',
-              tabsShow: 0b1111,
+        //       tabsShow: 0b1111,
-              itemSize: 100,
+        //       itemSize: 100,
-              multiple: true,
+        //       multiple: true,
-              selectable: true,
+        //       selectable: true,
-              showInput: true,
+        //       showInput: true,
-              inputType: 'image',
+        //       inputType: 'image',
-              valueKey: 'url',
+        //       valueKey: 'url',
-            }
+        //     }
-          }
+        //   }
-        }
+        // }
       },
     },
   };