releases 4.7.37

x-extends · Jun 27, 2024 · a5f8975 · a5f8975
1 parent 02de2a0
commit a5f8975
Show file tree

Hide file tree

Showing 28 changed files with 1,134 additions and 120 deletions.
diff --git a/README.en.md b/README.en.md
@@ -70,19 +70,37 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
 Version: [vue](https://www.npmjs.com/package/vue) 3.x
 
 ```shell
-npm install vxe-table
+npm install vxe-table@next
 ```
 
 Get on [unpkg](https://unpkg.com/vxe-table/) and [cdnjs](https://cdn.jsdelivr.net/npm/vxe-table/)
 
-### npm
+### NPM
+
+### Use Table
+
+```javascript
+// ...
+import VxeTable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+// ...
+
+createApp(App).use(VxeTable).mount('#app')
+```
+
+### Use Table and UI
 
 ```javascript
-import { createApp } from 'vue'
-import VxeUITable from 'vxe-table'
+// ...
+import VxeTable from 'vxe-table'
 import 'vxe-table/lib/style.css'
+// ...
+
+import VxeUI from 'vxe-pc-ui'
+import 'vxe-pc-ui/lib/style.css'
+// ...
 
-createApp(App).use(VxeUITable).mount('#app')
+createApp(App).use(VxeUI).use(VxeTable).mount('#app')
 ```
 
 ### CDN
@@ -91,11 +109,15 @@ Use a third-party CDN to remember to lock the version number to avoid being affe
 ***It is not recommended to use the CDN address of a third party in a formal environment because the connection can fail at any time***  
 
 ```HTML
-<!-- Style -->
-<link rel="stylesheet" href="https://unpkg.com/vxe-table/lib/style.css">
-<!-- Script -->
-<script src="https://unpkg.com/xe-utils"></script>
-<script src="https://unpkg.com/vxe-table"></script>
+<!-- style -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-pc-ui/lib/style.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css">
+<!-- vue -->
+<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+<!-- table -->
+<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
+<script src="https://cdn.jsdelivr.net/npm/vxe-pc-ui"></script>
+<script src="https://cdn.jsdelivr.net/npm/vxe-table@next"></script>
 ```
 
 ## Example
@@ -128,14 +150,15 @@ const tableData = ref([
 
 ## Online Documents
 
-👉 [Document](https://vxetable.cn)  
+👉 [UI Document](https://vxeui.com)  
+👉 [Table Document](https://vxetable.cn)  
 
 ## Run the project
 
 Install dependencies
 
 ```shell
-npm install
+npm run update
 ```
 
 Start local debugging

diff --git a/README.md b/README.md
@@ -84,19 +84,37 @@
 版本：[vue](https://www.npmjs.com/package/vue) 3.x
 
 ```shell
-npm install vxe-table
+npm install vxe-table@next
 ```
 
 Get on [unpkg](https://unpkg.com/vxe-table/) and [cdnjs](https://cdn.jsdelivr.net/npm/vxe-table/)
 
-### npm
+### NPM
+
+### 只使用表格
+
+```javascript
+// ...
+import VxeTable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+// ...
+
+createApp(App).use(VxeTable).mount('#app')
+```
+
+### 使用表格与 UI 库
 
 ```javascript
-import { createApp } from 'vue'
-import VxeUITable from 'vxe-table'
+// ...
+import VxeTable from 'vxe-table'
 import 'vxe-table/lib/style.css'
+// ...
+
+import VxeUI from 'vxe-pc-ui'
+import 'vxe-pc-ui/lib/style.css'
+// ...
 
-createApp(App).use(VxeUITable).mount('#app')
+createApp(App).use(VxeUI).use(VxeTable).mount('#app')
 ```
 
 ### CDN
@@ -105,11 +123,15 @@ createApp(App).use(VxeUITable).mount('#app')
 ***不建议将第三方的 CDN 地址用于正式环境，因为该连接随时都可能会失效***  
 
 ```HTML
-<!-- 引入样式 -->
-<link rel="stylesheet" href="https://unpkg.com/vxe-table/lib/style.css">
-<!-- 引入脚本 -->
-<script src="https://unpkg.com/xe-utils"></script>
-<script src="https://unpkg.com/vxe-table"></script>
+<!-- style -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-pc-ui/lib/style.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css">
+<!-- vue -->
+<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+<!-- table -->
+<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
+<script src="https://cdn.jsdelivr.net/npm/vxe-pc-ui"></script>
+<script src="https://cdn.jsdelivr.net/npm/vxe-table@next"></script>
 ```
 
 ## 示例
@@ -142,7 +164,8 @@ const tableData = ref([
 
 ## 在线文档
 
-👉 [官网文档](https://vxetable.cn)  
+👉 [组件文档](https://vxeui.com)  
+👉 [表格文档](https://vxetable.cn)  
 
 ## QQ 交流群
 

diff --git a/README.zh-TW.md b/README.zh-TW.md
@@ -69,19 +69,37 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
 版本：[vue](https://www.npmjs.com/package/vue) 3.x
 
 ```shell
-npm install vxe-table
+npm install vxe-table@next
 ```
 
 Get on [unpkg](https://unpkg.com/vxe-table/) and [cdnjs](https://cdn.jsdelivr.net/npm/vxe-table/)
 
-### npm
+### NPM
+
+### 使用表格
+
+```javascript
+// ...
+import VxeTable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+// ...
+
+createApp(App).use(VxeTable).mount('#app')
+```
+
+### 使用表格与 UI 库
 
 ```javascript
-import { createApp } from 'vue'
-import VxeUITable from 'vxe-table'
+// ...
+import VxeTable from 'vxe-table'
 import 'vxe-table/lib/style.css'
+// ...
+
+import VxeUI from 'vxe-pc-ui'
+import 'vxe-pc-ui/lib/style.css'
+// ...
 
-createApp(App).use(VxeUITable).mount('#app')
+createApp(App).use(VxeUI).use(VxeTable).mount('#app')
 ```
 
 ### CDN
@@ -90,11 +108,15 @@ createApp(App).use(VxeUITable).mount('#app')
 ***不建議將第三方的 CDN 地址用於正式環境，因爲該連接隨時都可能會失效***  
 
 ```HTML
-<!-- 引入樣式 -->
-<link rel="stylesheet" href="https://unpkg.com/vxe-table/lib/style.css">
-<!-- 引入腳本 -->
-<script src="https://unpkg.com/xe-utils"></script>
-<script src="https://unpkg.com/vxe-table"></script>
+<!-- style -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-pc-ui/lib/style.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css">
+<!-- vue -->
+<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+<!-- table -->
+<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
+<script src="https://cdn.jsdelivr.net/npm/vxe-pc-ui"></script>
+<script src="https://cdn.jsdelivr.net/npm/vxe-table@next"></script>
 ```
 
 ## 示例
@@ -127,14 +149,15 @@ const tableData = ref([
 
 ## 線上檔案
 
-👉 [官網檔案](https://vxetable.cn)  
+👉 [組件文檔](https://vxeui.com)  
+👉 [表格文檔](https://vxetable.cn)  
 
 ## 運行項目
 
 安裝依賴
 
 ```shell
-npm install
+npm run update
 ```
 
 啓動本地調試

diff --git a/examples/App.vue b/examples/App.vue
@@ -4,6 +4,10 @@
       <div>
         <button @click="changeTheme">切换主题</button>
       </div>
+      <div>
+        <button @click="changeLang('zh-CN')">中文</button>
+        <button @click="changeLang('en-US')">英文</button>
+      </div>
       <RouterLink  class="link" v-for="(item, index) in navList" :key="index" :to="item.routerLink">{{ item.name }}</RouterLink>
     </div>
     <div class="page-layout-body">
@@ -36,6 +40,12 @@ const changeTheme = () => {
   VxeUI.setTheme(themeName)
   localStorage.setItem('VXE_THEME', themeName)
 }
+
+VxeUI.setLanguage((localStorage.getItem('VXE_LANGUAGE') as 'zh-CN' | 'en-US') || 'zh-CN')
+const changeLang = (lang: 'zh-CN' | 'en-US') => {
+  VxeUI.setLanguage(lang)
+  localStorage.setItem('VXE_LANGUAGE', lang)
+}
 </script>
 
 <style lang="scss" scoped>

diff --git a/examples/main.ts b/examples/main.ts
@@ -2,16 +2,20 @@ 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 enUS from 'vxe-pc-ui/packages/language/en-US'
+
+import VxeTable from '../packages'
 import '../styles/all.scss'
 
 import './style/index.scss'
 
+// VxeUI.setI18n('en-US', enUS)
+
 createApp(App)
   .use(router)
-  .use(VxeUI)
-  .use(VxeUITable)
+  // .use(VxeUI)
+  .use(VxeTable)
   .mount('#app')
diff --git a/examples/views/table/TableTest1.vue b/examples/views/table/TableTest1.vue
@@ -13,18 +13,12 @@
       <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">
+      <vxe-column field="age" title="Age" :filters="ageOptions" :filter-method="filterAgeMethod">
         <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"
-        title="Age"
-        sortable
-        :filters="demo1.ageOptions"
-        :filter-method="filterAgeMethod"></vxe-column>
       <vxe-column field="address" title="Address" show-overflow></vxe-column>
     </vxe-table>
   </div>

diff --git a/examples/views/table/TableTest2.vue b/examples/views/table/TableTest2.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <vxe-toolbar ref="toolbarRef" custom></vxe-toolbar>
+    <vxe-toolbar ref="toolbarRef" custom export import></vxe-toolbar>
 
     <vxe-table
       border
@@ -12,6 +12,8 @@
       id="bbbbb"
       :custom-config="{storage:true}"
       :loading="demo1.loading"
+      :import-config="{modes: importModes}"
+      :export-config="{modes: exportModes}"
       :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">
@@ -49,6 +51,18 @@ interface RowVO {
 const tableRef = ref<VxeTableInstance<RowVO>>()
 const toolbarRef = ref<VxeToolbarInstance>()
 
+const importModes = ref([
+  { label: '自定义25', value: '11' },
+  { label: '自定义11', value: '33' },
+  { label: 'current', value: 'current' }
+])
+
+const exportModes = ref([
+  { label: '自定义25', value: '11' },
+  { label: '自定义11', value: '33' },
+  { label: 'current', value: 'current' }
+])
+
 const demo1 = reactive({
   loading: false,
   tableData: [] as any[],

diff --git a/examples/views/table/TableTest3.vue b/examples/views/table/TableTest3.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <vxe-toolbar ref="toolbarRef" print custom></vxe-toolbar>
+    <vxe-toolbar ref="toolbarRef" print export import custom></vxe-toolbar>
 
     <vxe-table
       border
@@ -11,6 +11,8 @@
       ref="tableRef"
       id="aaaa"
       :print-config="{}"
+      :import-config="{}"
+      :export-config="{}"
       :custom-config="{mode: 'popup',storage:true}"
       :loading="demo1.loading"
       :expand-config="{iconOpen: 'vxe-icon-question-circle-fill', iconClose: 'vxe-icon-question-circle-fill'}"