releases 4.7.33

examples/views/table/TableTest1.vue

@@ -13,6 +13,11 @@
       <vxe-column type="checkbox" title="ID" width="140"></vxe-column>
       <vxe-column field="role" title="Role"></vxe-column>
       <vxe-column field="name" title="Name" sortable></vxe-column>
+      <vxe-column field="age" title="Age" :filters="ageOptions" :filter-method="filterAgeMethod" :filter-recover-method="filterAgeRecoverMethod">
+        <template #filter="{ $panel, column }">
+          <vxe-input class="my-input" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @input="$panel.changeOption($event, !!option.data, option)" @keyup.enter="$panel.confirmFilter()" placeholder="按回车确认筛选" />
+        </template>
+      </vxe-column>
       <vxe-column field="sex" title="Sex" :filters="demo1.sexList" :filter-multiple="false" :formatter="formatterSex"></vxe-column>
       <vxe-column
         field="age"
@@ -26,9 +31,13 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { VxeColumnPropTypes } from '../../../types'
 
+const ageOptions = ref<VxeColumnPropTypes.Filters>([
+  { data: '' }
+])
+
 const demo1 = reactive({
   loading: false,
   tableData: [] as any[],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.7.32",
+  "version": "4.7.33",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -28,7 +28,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "vxe-pc-ui": "^4.0.30"
+    "vxe-pc-ui": "^4.0.31"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",

packages/table/module/filter/panel.ts

@@ -233,7 +233,7 @@ export default defineComponent({
           }
         ],
         style: filterStore.style
-      }, initStore.filter && filterStore.visible ? renderOptions(filterRender, compConf).concat(renderFooters()) : [])
+      }, initStore.filter ? renderOptions(filterRender, compConf).concat(renderFooters()) : [])
     }
 
     return renderVN

packages/table/render/index.ts

@@ -551,6 +551,7 @@ renderer.mixin({
           case 'date':
           case 'week':
           case 'month':
+          case 'quarter':
           case 'year':
             cellValue = getLabelFormatDate(cellValue, props)
             break
@@ -565,6 +566,51 @@ renderer.mixin({
     renderFilter: defaultFilterRender,
     defaultFilterMethod: handleFilterMethod
   },
+  VxeNumberInput: {
+    autofocus: '.vxe-number-input--inner',
+    renderEdit: defaultEditRender,
+    renderCell (renderOpts: any, params: any) {
+      const { props = {} } = renderOpts
+      const { row, column } = params
+      const digits = props.digits || getConfig().numberInput?.digits || 2
+      let cellValue = XEUtils.get(row, column.property)
+      if (cellValue) {
+        switch (props.type) {
+          case 'float':
+            cellValue = XEUtils.toFixed(XEUtils.floor(cellValue, digits), digits)
+            break
+        }
+      }
+      return getCellLabelVNs(renderOpts, params, cellValue)
+    },
+    renderDefault: defaultEditRender,
+    renderFilter: defaultFilterRender,
+    defaultFilterMethod: handleFilterMethod
+  },
+  VxeDatePicker: {
+    autofocus: '.vxe-date-picker--inner',
+    renderEdit: defaultEditRender,
+    renderCell (renderOpts: any, params: any) {
+      const { props = {} } = renderOpts
+      const { row, column } = params
+      let cellValue = XEUtils.get(row, column.property)
+      if (cellValue) {
+        switch (props.type) {
+          case 'date':
+          case 'week':
+          case 'month':
+          case 'quarter':
+          case 'year':
+            cellValue = getLabelFormatDate(cellValue, props)
+            break
+        }
+      }
+      return getCellLabelVNs(renderOpts, params, cellValue)
+    },
+    renderDefault: defaultEditRender,
+    renderFilter: defaultFilterRender,
+    defaultFilterMethod: handleFilterMethod
+  },
   VxeTextarea: {
     autofocus: '.vxe-textarea--inner'
   },
@@ -596,18 +642,6 @@ renderer.mixin({
     defaultFilterMethod: handleFilterMethod,
     exportMethod: handleExportSelectMethod
   },
-  VxeRadio: {
-    autofocus: '.vxe-radio--input'
-  },
-  VxeRadioGroup: {
-    autofocus: '.vxe-radio--input'
-  },
-  VxeCheckbox: {
-    autofocus: '.vxe-checkbox--input'
-  },
-  VxeCheckboxGroup: {
-    autofocus: '.vxe-checkbox--input'
-  },
   VxeSwitch: {
     autofocus: '.vxe-switch--button',
     renderEdit: defaultEditRender,

styles/components/table.scss

@@ -45,14 +45,14 @@
 
 /*默认的渲染*/
 .vxe-cell,
-.vxe-table--filter-wrapper {
-  .vxe-default-input,
-  .vxe-default-textarea {
+.vxe-table--filter-template {
+  & > .vxe-default-input,
+  & > .vxe-default-textarea {
     background-color: var(--vxe-ui-layout-background-color);
   }
-  .vxe-default-input,
-  .vxe-default-textarea,
-  .vxe-default-select {
+  & > .vxe-default-input,
+  & > .vxe-default-textarea,
+  & > .vxe-default-select {
     outline: 0;
     padding: 0 2px;
     width: 100%;
@@ -67,12 +67,12 @@
       background-color: var(--vxe-ui-input-disabled-background-color);
     }
   }
-  .vxe-default-input,
-  .vxe-default-textarea,
-  .vxe-default-select {
+  & > .vxe-default-input,
+  & > .vxe-default-textarea,
+  & > .vxe-default-select {
     height: var(--vxe-ui-input-height-default);
   }
-  .vxe-default-input {
+  & > .vxe-default-input {
     &[type="date"]::-webkit-inner-spin-button {
       margin-top: 4px;
     }
@@ -84,21 +84,23 @@
       color: var(--vxe-ui-input-placeholder-color);
     }
   }
-  .vxe-default-textarea {
+  & > .vxe-default-textarea {
     resize: none;
     vertical-align: middle;
   }
-  .vxe-input,
-  .vxe-textarea,
-  .vxe-select {
+  & > .vxe-input,
+  & > .vxe-textarea,
+  & > .vxe-select,
+  & > .vxe-date-picker,
+  & > .vxe-number-input {
     width: 100%;
   }
-  .vxe-input > .vxe-input--inner,
-  .vxe-textarea > .vxe-textarea--inner {
+  & > .vxe-input > .vxe-input--inner,
+  & > .vxe-textarea > .vxe-textarea--inner {
     padding: 0 2px;
   }
-  .vxe-textarea--inner,
-  .vxe-default-textarea {
+  & > .vxe-textarea--inner,
+  & > .vxe-default-textarea {
     resize: none;
   }
 }