src/components/VnTable/VnColumn.vue

@@ -134,26 +134,28 @@ const col = computed(() => {
 const components = computed(() => $props.components ?? defaultComponents);
 </script>
 <template>
-    <VnComponent
+    <div class="row no-wrap fit">
-        v-if="col.before"
+        <VnComponent
-        :prop="col.before"
+            v-if="col.before"
-        :components="components"
+            :prop="col.before"
-        :value="model"
+            :components="components"
-        v-model="model"
+            :value="model"
-    />
+            v-model="model"
-    <VnComponent
+        />
-        v-if="col.component"
+        <VnComponent
-        :prop="col"
+            v-if="col.component"
-        :components="components"
+            :prop="col"
-        :value="model"
+            :components="components"
-        v-model="model"
+            :value="model"
-    />
+            v-model="model"
-    <span :title="value" v-else>{{ value }}</span>
+        />
-    <VnComponent
+        <span :title="value" v-else>{{ value }}</span>
-        v-if="col.after"
+        <VnComponent
-        :prop="col.after"
+            v-if="col.after"
-        :components="components"
+            :prop="col.after"
-        :value="model"
+            :components="components"
-        v-model="model"
+            :value="model"
-    />
+            v-model="model"
+        />
+    </div>
 </template>

src/components/ui/VnFilterPanel.vue

@@ -147,7 +147,7 @@ const tagsList = computed(() => {
     const tagList = [];
     for (const key of Object.keys(params.value)) {
         const value = params.value[key];
-        if (!value || ($props.hiddenTags || []).includes(key)) continue;
+        if (value == null || ($props.hiddenTags || []).includes(key)) continue;
         tagList.push({ label: key, value });
     }
     return tagList;
@@ -161,21 +161,14 @@ const customTags = computed(() =>
 );
 
 async function remove(key) {
-    delete params.value[key];
-    delete params.value.filter?.where?.[key];
     params.value[key] = undefined;
-    await arrayData.applyFilter({ params: params.value });
+    search();
     emit('remove', key);
 }
 
 function formatValue(value) {
-    if (typeof value === 'boolean') {
+    if (typeof value === 'boolean') return value ? t('Yes') : t('No');
-        return value ? t('Yes') : t('No');
+    if (isNaN(value) && !isNaN(Date.parse(value))) return toDate(value);
-    }
-
-    if (isNaN(value) && !isNaN(Date.parse(value))) {
-        return toDate(value);
-    }
 
     return `"${value}"`;
 }
@@ -236,7 +229,7 @@ function formatValue(value) {
                         <slot name="tags" :tag="chip" :format-fn="formatValue">
                             <div class="q-gutter-x-xs">
                                 <strong>{{ chip.label }}:</strong>
-                                <span>"{{ chip.value }}"</span>
+                                <span>"{{ formatValue(chip.value) }}"</span>
                             </div>
                         </slot>
                     </VnFilterPanelChip>

src/pages/Customer/CustomerList.vue

@@ -94,15 +94,19 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.phone'),
         name: 'phone',
         cardVisible: true,
-        after: {
+        columnFilter: {
-            component: markRaw(VnLinkPhone),
+            component: 'number',
-            props: (prop) => ({
-                'phone-number': prop.phone,
-            }),
         },
-        component: 'number',
         columnField: {
             component: null,
+            after: {
+                component: markRaw(VnLinkPhone),
+                attrs: (prop) => {
+                    return {
+                        'phone-number': prop,
+                    };
+                },
+            },
         },
     },
     {