view-ui-plus-derive 0.2.0 → 0.2.2

package/README.md

@@ -13,8 +13,6 @@ or
 yarn add view-ui-plus-derive
 ```
 
-[TOC]
-
 ### CDN引入
 
 ```html
@@ -99,7 +97,7 @@ createApp(App).use(ViewUIPlus).component(Combi.name, Combi).mount('#app')
 仅部分组件需要对应样式，如图
 ![css](./assets/import%20component%20css.png)
 
-### 国际化
+## 国际化
 
 目前提供中英翻译，默认显示简体中文。在安装插件时可传入需要显示的语言，若使用vue-i18n，则只需传入vue-i18n实例
 
@@ -228,7 +226,7 @@ createApp(App)
   .mount('#app')
 ```
 
-### 调优
+## 调优
 
 - 为多选模式的iview Select添加全选功能。**若全局安装了插件则无需再次注册指令**
 
@@ -251,26 +249,62 @@ import { iviewSelect as vIviewSelect } from "view-ui-plus-derive";
 <Select v-iview-select:all="true" multiple></Select>
 ```
 
-- 调整iview的InputNumber默认值为null，避免在值为undefined时显示 1
-- 为InputNumber添加prop：unset，用于设置在清空时的默认值
+- 调整iview的 InputNumber 默认值为null，避免在值为undefined时显示 1
+- 为 InputNumber 添加prop：`unset`，用于设置在清空时的默认值
 
 ```js
 import 'view-ui-plus-derive/iview-mods/input-number'
 ```
 
-- 修复iview Select启用filterable时在过滤后可能只显示之前所选项的bug
+- 修复 iview Select 启用filterable时在过滤后可能只显示之前所选项的bug
 
 ```js
 import 'view-ui-plus-derive/iview-mods/select'
 ```
 
-- 修复Table在某些情况下表头/固定列与内容错位
+- 修复 Table 在某些情况下表头/固定列与内容错位
 
 ```js
 import 'view-ui-plus-derive/iview-mods/table'
 ```
 
-也可以一次性引入iview-mods下的input-number、select、table
+- 为 Table 添加prop：`cache-cols`，启用列宽缓存功能
+
+```js
+import 'view-ui-plus-derive/iview-mods/table-cache-cols'
+```
+
+```vue
+<template>
+  <Table border :columns="columns" :cache-cols="cacheCols"></Table>
+</template>
+
+<script setup>
+const columns = [
+  {
+    prop: 'name',
+    label: '名称',
+    resizable: true
+  },
+  {
+    prop: 'age',
+    label: '年龄'
+  }
+]
+// 传递字符串指定存储路径
+const cacheCols = 'app.userA.[page.list.cols]'
+
+// 也可传递一个对象：keys 决定存储路径，cols 为列配置
+const cacheCols = {
+  // 若路径较深，建议适当扁平以简化存取的对象结构
+  // 如下会以 app.userA['page.list.cols'] 的形式读写 localStorage。若去掉中括号，对象将为 app.userA.page.list.cols 的形式
+  keys: 'app.userA.[page.list.cols]', // 或者不使用点，如 'app.userA.page_list_cols' | 'app.userA.page-list-cols'
+  cols: columns
+}
+</script>
+```
+
+也可以一次性引入iview-mods下的所有mod：input-number、select、table、cache-cols等
 
 ```js
 // 本地引入
@@ -298,7 +332,7 @@ import 'view-ui-plus-derive/iview-mod.css'
 <link rel="stylesheet" href="https://unpkg.com/view-ui-plus-derive/dist/iview-mod.css" />
 ```
 
-### 组件
+## 组件
 
 [AllCheckbox](./md/AllCheckbox.md)  
 提供全选功能的CheckboxGroup
@@ -307,13 +341,13 @@ import 'view-ui-plus-derive/iview-mod.css'
 更易于使用的Switch
 
 [RemoteSelect](./md/RemoteSelect.md)  
-远程Select
+获取远程数据的Select，默认在展开时才触发请求
 
 [CacheSelect](./md/CacheSelect.md)  
 避免重复调用远程接口的RemoteSelect，同一个cacheId对应只触发一次请求
 
 [Combi](./md/Combi.md)  
-类似iview Input[append prepend]的组合框
+类似iview Input[append prepend]样式的组合框
 
 [CountRange](./md/CountRange.md)  
 数值范围组件