releases 4.7.1

2025-11-06 11:20:40 +08:00 · 2024-05-30 18:37:56 +08:00
parent 39845b9b57
commit 3e6683e9d4
13 changed files with 173 additions and 46 deletions
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -19,7 +19,8 @@ import { VxeUI } from '../packages'
 const navList = ref([
  { name: 'Home', icon: 'vxe-icon-user-fill', routerLink: { path: '/' } },
  { name: 'ToolbarTest', routerLink: { name: 'ToolbarTest' } },
-  { name: 'TableTest', routerLink: { name: 'TableTest' } },
+  { name: 'TableTest1', routerLink: { name: 'TableTest1' } },
+  { name: 'TableTest2', routerLink: { name: 'TableTest2' } },
  { name: 'GridTest', routerLink: { name: 'GridTest' } }
 ])

--- a/examples/main.ts
+++ b/examples/main.ts
@@ -2,8 +2,8 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'

-// import VxeUI from 'vxe-pc-ui'
-// import 'vxe-pc-ui/lib/style.css'
+import VxeUI from 'vxe-pc-ui'
+import 'vxe-pc-ui/lib/style.css'

 import VxeUITable from '../packages'
 import '../styles/all.scss'
@@ -12,6 +12,6 @@ import './style/index.scss'

 createApp(App)
  .use(router)
-  // .use(VxeUI)
+  .use(VxeUI)
  .use(VxeUITable)
  .mount('#app')
--- a/examples/router/index.ts
+++ b/examples/router/index.ts
@@ -26,9 +26,14 @@ const routes: Array<RouteRecordRaw> = [
    component: () => import('../views/toolbar/ToolbarTest.vue')
  },
  {
-    path: '/component/table',
-    name: 'TableTest',
-    component: () => import('../views/table/TableTest.vue')
+    path: '/component/table1',
+    name: 'TableTest1',
+    component: () => import('../views/table/TableTest1.vue')
+  },
+  {
+    path: '/component/table2',
+    name: 'TableTest2',
+    component: () => import('../views/table/TableTest2.vue')
  },
  {
    path: '/component/grid',
--- a/examples/views/table/TableTest1.vue
+++ b/examples/views/table/TableTest1.vue
@@ -11,6 +11,7 @@
      :data="demo1.tableData">
      <vxe-column type="seq" width="60"></vxe-column>
      <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="sex" title="Sex" :filters="demo1.sexList" :filter-multiple="false" :formatter="formatterSex"></vxe-column>
      <vxe-column
@@ -32,16 +33,29 @@ const demo1 = reactive({
  loading: false,
  tableData: [] as any[],
  sexList: [
-    {
-      label: '女',
-      value: '0'
-    },
-    {
-      label: '男',
-      value: '1'
-    }
+    { label: '女', value: '0' },
+    { label: '男', value: '1' }
  ],
-  ageOptions: [{ label: '大于16岁', value: 16 }, { label: '大于26岁', value: 26 }, { label: '大于30岁', value: 30 }]
+  ageOptions: [
+    { label: '大于16岁', value: 16 },
+    { label: '大于26岁', value: 26 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 }
+  ]
 })

 const formatterSex: VxeColumnPropTypes.Formatter = ({ cellValue }) => {
@@ -79,6 +93,6 @@ onMounted(() => {
      { id: 10020, name: 'Test20', role: 'Develop', sex: '1', age: 41, address: 'test abc' }
    ]
    demo1.loading = false
-  }, 500)
+  }, 100)
 })
 </script>
--- a/examples/views/table/TableTest2.vue
+++ b/examples/views/table/TableTest2.vue
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <vxe-table
+      border
+      stripe
+      resizable
+      highlight-hover-row
+      height="400"
+      :loading="demo1.loading"
+      :expand-config="{iconOpen: 'vxe-icon-question-circle-fill', iconClose: 'vxe-icon-question-circle-fill'}"
+      :checkbox-config="{labelField: 'id', highlight: true, range: true}"
+      :data="demo1.tableData">
+      <vxe-column type="seq" width="60"></vxe-column>
+      <vxe-column type="checkbox" title="ID" width="140"></vxe-column>
+      <vxe-column type="expand" field="role" title="Role">
+        <template #content="{ row }">
+          <div>{{ row.name }}</div>
+        </template>
+      </vxe-column>
+      <vxe-column field="name" title="Name" sortable></vxe-column>
+      <vxe-column field="sex" title="Sex" :filters="demo1.sexList" :filter-multiple="false" :formatter="formatterSex"></vxe-column>
+      <vxe-column
+        field="age"
+        title="Age"
+        sortable
+        :filters="demo1.ageOptions"
+        :filter-method="filterAgeMethod"></vxe-column>
+      <vxe-column field="address" title="Address" show-overflow></vxe-column>
+    </vxe-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, reactive } from 'vue'
+import { VxeColumnPropTypes } from '../../../types'
+
+const demo1 = reactive({
+  loading: false,
+  tableData: [] as any[],
+  sexList: [
+    { label: '女', value: '0' },
+    { label: '男', value: '1' }
+  ],
+  ageOptions: [
+    { label: '大于16岁', value: 16 },
+    { label: '大于26岁', value: 26 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 },
+    { label: '大于30岁', value: 30 }
+  ]
+})
+
+const formatterSex: VxeColumnPropTypes.Formatter = ({ cellValue }) => {
+  const item = demo1.sexList.find(item => item.value === cellValue)
+  return item ? item.label : ''
+}
+
+const filterAgeMethod: VxeColumnPropTypes.FilterMethod = ({ value, row }) => {
+  return row.age >= value
+}
+
+onMounted(() => {
+  demo1.loading = true
+  setTimeout(() => {
+    demo1.tableData = [
+      { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'test abc' },
+      { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, address: 'Guangzhou' },
+      { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, address: 'Shanghai' },
+      { id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 23, address: 'test abc' },
+      { id: 10005, name: 'Test5', role: 'Develop', sex: '1', age: 30, address: 'Shanghai' },
+      { id: 10006, name: 'Test6', role: 'Designer', sex: '1', age: 21, address: 'test abc' },
+      { id: 10007, name: 'Test7', role: 'Test', sex: '0', age: 29, address: 'test abc' },
+      { id: 10008, name: 'Test8', role: 'Develop', sex: '0', age: 35, address: 'test abc' },
+      { id: 10009, name: 'Test9', role: 'Test', sex: '1', age: 21, address: 'test abc' },
+      { id: 10010, name: 'Test10', role: 'Develop', sex: '0', age: 28, address: 'test abc' },
+      { id: 10011, name: 'Test11', role: 'Test', sex: '0', age: 29, address: 'test abc' },
+      { id: 10012, name: 'Test12', role: 'Develop', sex: '1', age: 27, address: 'test abc' },
+      { id: 10013, name: 'Test13', role: 'Test', sex: '0', age: 24, address: 'test abc' },
+      { id: 10014, name: 'Test14', role: 'Develop', sex: '1', age: 34, address: 'test abc' },
+      { id: 10015, name: 'Test15', role: 'Test', sex: '1', age: 21, address: 'test abc' },
+      { id: 10016, name: 'Test16', role: 'Develop', sex: '0', age: 20, address: 'test abc' },
+      { id: 10017, name: 'Test17', role: 'Test', sex: '1', age: 31, address: 'test abc' },
+      { id: 10018, name: 'Test18', role: 'Develop', sex: '0', age: 32, address: 'test abc' },
+      { id: 10019, name: 'Test19', role: 'Test', sex: '1', age: 37, address: 'test abc' },
+      { id: 10020, name: 'Test20', role: 'Develop', sex: '1', age: 41, address: 'test abc' }
+    ]
+    demo1.loading = false
+  }, 100)
+})
+</script>
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -28,6 +28,7 @@ const esmOutDir = 'es'
 const commOutDir = 'lib'

 const coreName = 'ui'
+const oldCoreName = 'v-x-e-table'

 const componentList = [
  'table',
@@ -71,7 +72,7 @@ function toExportName (name) {
 }

 gulp.task('build_escode', function () {
-  [coreName, ...componentList].forEach(name => {
+  [coreName, oldCoreName, ...componentList].forEach(name => {
    const exportName = `Vxe${toExportName(name)}`
    const esCode = `import ${exportName} from '../${name}'\nexport * from '../${name}'\nexport default ${exportName}`
    fs.mkdirSync(`packages_temp/vxe-${name}`)
@@ -239,7 +240,7 @@ function buildStyle (name, dirName) {

 gulp.task('build_single_style', () => {
  const rest = [];
-  [coreName, ...componentList].forEach(name => {
+  [coreName, oldCoreName, ...componentList].forEach(name => {
    rest.push(buildStyle(name, name))
    rest.push(buildStyle(name, `vxe-${name}`))
  })
@@ -301,7 +302,7 @@ gulp.task('clear', () => {
 gulp.task('build_all', gulp.parallel('build_es_all', 'build_common_all', 'build_umd_all'))

 gulp.task('build', gulp.series('clear', 'copy_pack', 'build_all', 'build_i18n', 'build_single_style', () => {
-  [coreName, ...componentList].forEach(name => {
+  [coreName, oldCoreName, ...componentList].forEach(name => {
    fs.writeFileSync(`lib/${name}/style/index.js`, styleCode)
    fs.writeFileSync(`lib/vxe-${name}/style/index.js`, styleCode)
  })
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vxe-table",
-  "version": "4.7.0",
+  "version": "4.7.1",
  "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": "^1.8.4"
+    "vxe-pc-ui": "^1.8.9"
  },
  "devDependencies": {
    "@types/resize-observer-browser": "^0.1.11",
--- a/packages/table/src/table.ts
+++ b/packages/table/src/table.ts
@@ -2811,6 +2811,19 @@ export default defineComponent({
            return tableMethods.recalculate()
          })
      },
+      /**
+       * 修改行数据
+       */
+      setRow (rows, record) {
+        if (rows && record) {
+          let rest: any[] = rows
+          if (!XEUtils.isArray(rows)) {
+            rest = [rows]
+          }
+          rest.forEach(item => Object.assign(item, record))
+        }
+        return nextTick()
+      },
      /**
       * 局部加载行数据并恢复到初始状态
       * 对于行数据需要局部更改的场景中可能会用到
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -1,4 +1,4 @@
-import { VxeUI } from 'vxe-pc-ui'
+import { VxeUI, modal, drawer, saveFile, readFile } from 'vxe-pc-ui'

 VxeUI.version = process.env.VUE_APP_VXE_VERSION as string
 VxeUI.tableVersion = process.env.VUE_APP_VXE_VERSION as string
@@ -286,7 +286,11 @@ export const _t = VxeUI._t
 export const VXETable = VxeUI

 export {
-  VxeUI
+  VxeUI,
+  modal,
+  drawer,
+  saveFile,
+  readFile
 }

 export default VxeUI
--- a/packages/v-x-e-table/index.d.ts
+++ b/packages/v-x-e-table/index.d.ts
@@ -0,0 +1,4 @@
+import VxeUI from '../ui'
+
+export * from '../ui'
+export default VxeUI
--- a/packages/v-x-e-table/index.ts
+++ b/packages/v-x-e-table/index.ts
@@ -0,0 +1,4 @@
+import VxeUI from '../ui'
+
+export * from '../ui'
+export default VxeUI
--- a/styles/components/v-x-e-table.scss
+++ b/styles/components/v-x-e-table.scss
--- a/types/all.d.ts
+++ b/types/all.d.ts
@@ -1,19 +1,4 @@
 import { VxeUIExport } from 'vxe-pc-ui'
-import VxeColumn from 'vxe-pc-ui/types/components/column'
-import VxeColgroup from 'vxe-pc-ui/types/components/colgroup'
-import VxeTable from 'vxe-pc-ui/types/components/table'
-import VxeGrid from 'vxe-pc-ui/types/components/grid'
-import VxeToolbar from 'vxe-pc-ui/types/components/toolbar'
-
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    VxeColumn: typeof VxeColumn
-    VxeColgroup: typeof VxeColgroup
-    VxeTable: typeof VxeTable
-    VxeGrid: typeof VxeGrid
-    VxeToolbar: typeof VxeToolbar
-  }
-}

 declare global {
  interface Window {
@@ -37,10 +22,3 @@ export const VXETable: VxeUIExport
 export type VXETableCore = VxeUIExport

 export * from 'vxe-pc-ui'
-
-// Component
-export * from 'vxe-pc-ui/types/components/column'
-export * from 'vxe-pc-ui/types/components/colgroup'
-export * from 'vxe-pc-ui/types/components/table'
-export * from 'vxe-pc-ui/types/components/grid'
-export * from 'vxe-pc-ui/types/components/toolbar'