perf(table): 新增列筛选功能

2021-11-07 15:55:08 +08:00 · 2021-11-07 15:55:08 +08:00 · e42cedab18
commit e42cedab18
parent e16ac685e4
56 changed files with 478 additions and 138 deletions
--- a/docs/docs/zh-CN/components/animation.md
+++ b/docs/docs/zh-CN/components/animation.md
@ -74,6 +74,8 @@ export default {
 ::: title 动画类名
 :::

+::: table
+
 | 类名                              | 描述         | 使用                                           |
 | --------------------------------- | ------------ | ---------------------------------------------- |
 | layui-anim-down                   | 顶部往下滑入 | `layui-anim layui-anim-down`                   |
@ -88,3 +90,5 @@ export default {
 | layui-anim-fadeout                | 渐隐         | `layui-anim layui-anim-fadeout`                |
 | layui-anim-rotate                 | 360 度旋转   | `layui-anim layui-anim-rotate`                 |
 | layui-anim-rotate layui-anim-loop | 循环动画     | `layui-anim layui-anim-rotate layui-anim-loop` |
+
+:::
--- a/docs/docs/zh-CN/components/avatar.md
+++ b/docs/docs/zh-CN/components/avatar.md
@ -72,7 +72,7 @@ export default {
        const src = "https://portrait.gitee.com/uploads/avatars/user/30/92529_sentsin_1578917144.jpg"

        return {
-            src
+          src
        }
  }
 }
@ -83,8 +83,12 @@ export default {
 ::: title 头像属性
 :::

+::: table
+
 | 属性   | 描述 | 可选值         |
 | ------ | ---- | -------------- |
 | src    | 图源 | --             |
 | size   | 尺寸 | `xs` `sm` `lg` |
 | radius | 圆形 | `true` `false` |
+
+:::
--- a/docs/docs/zh-CN/components/badge.md
+++ b/docs/docs/zh-CN/components/badge.md
@ -39,7 +39,11 @@ export default {
 ::: title 徽章属性
 :::

+::: table
+
 |       |      |                                               |
 | ----- | ---- | --------------------------------------------- |
 | type  | 类型 | `dot` `rim`                                   |
 | theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
+
+:::
--- a/docs/docs/zh-CN/components/block.md
+++ b/docs/docs/zh-CN/components/block.md
@ -50,6 +50,10 @@ export default {
 ::: title Block 属性
 :::

+::: table
+
 | Name | Description | Accepted Values |
 | ---- | ----------- | --------------- |
 | nm   | 灰色样式    | --              |
+
+:::
--- a/docs/docs/zh-CN/components/breadcrumb.md
+++ b/docs/docs/zh-CN/components/breadcrumb.md
@ -82,13 +82,21 @@ export default {
 ::: title 面包屑属性
 :::

+::: table
+
 | 属性      | 描述   | 默认值 |
 | --------- | ------ | ------ |
 | separator | 分割符 | `/`    |

+:::
+
 ::: title 面包屑插槽
 :::

+::: table
+
 | 插槽    | 描述     | 默认值 |
 | ------- | -------- | ------ |
 | default | 默认插槽 | `--`   |
+
+:::
--- a/docs/docs/zh-CN/components/button.md
+++ b/docs/docs/zh-CN/components/button.md
@ -283,17 +283,26 @@ export default {
 ::: title 按钮属性
 :::

-| 属性   | 描述   | 可选值                                        |
-| ------ | ------ | --------------------------------------------- |
-| type   | 主题   | `primary` `normal` `warm` `danger` `disabled` |
-| size   | 尺寸   | `lg` `sm` `xs`                                |
-| fluid  | 最大化 | `true` `false`                                |
-| radius | 圆角   | `true` `false`                                |
-| border | 边框   | `green` `blue` `orange` `red` `black`         |
+::: table
+
+| 属性   | 描述         | 可选值                              |
+| ------ | -----------  | --------------------------------------------- |
+| type   | 主题         | `primary` `normal` `warm` `danger` `disabled` |
+| size   | 尺寸         | `lg` `sm` `xs`                                |
+| fluid  | 最大化       | `true` `false`                                |
+| radius | 圆角         | `true` `false`                                |
+| border | 边框         | `green` `blue` `orange` `red` `black`         |
+
+:::

 ::: title 按钮事件
 :::

-| 事件  | 描述     | 参数 |
-| ----- | -------- | ---- |
-| click | 单击事件 | `--` |
+::: table
+
+| 事件   | 描述         | 参数                              | 
+| ------ | -----------  | --------------------------------------------- |
+| click   | 单击事件         | `--` |
+
+:::
+
--- a/docs/docs/zh-CN/components/cards.md
+++ b/docs/docs/zh-CN/components/cards.md
@ -108,14 +108,22 @@ export default {
 ::: title 卡片属性
 :::

+::: table
+
 | 属性  | 描述 | 可选值 |
 | ----- | ---- | ------ |
 | title | 标题 | --     |

+:::
+
 ::: title 卡片插槽
 :::

+::: table
+
 | 插槽   | 描述     | 可选值 |
 | ------ | -------- | ------ |
 | header | 头部插槽 | --     |
 | body   | 内容插槽 | --     |
+
+:::
--- a/docs/docs/zh-CN/components/carousel.md
+++ b/docs/docs/zh-CN/components/carousel.md
@ -118,6 +118,8 @@ export default {
 ::: title 轮播属性
 :::

+::: table
+
 | 属性      | 描述         | 可选值                    |
 | --------- | ------------ | ------------------------- |
 | v-model   | 当前激活项   | `--`                      |
@ -125,9 +127,15 @@ export default {
 | indicator | 控制器位置   | `inside` `outside` `none` |
 | arrow     | 切换按钮状态 | `hover` `always` `none`   |

+:::
+
 ::: title 轮播事件
 :::

+::: table
+
 | 事件   | 描述     | 可选值 |
 | ------ | -------- | ------ |
 | change | 切换回调 | id     |
+
+:::
--- a/docs/docs/zh-CN/components/checkbox.md
+++ b/docs/docs/zh-CN/components/checkbox.md
@ -152,6 +152,8 @@ export default {
 ::: title 复选框属性
 :::

+::: table
+
 | 属性                | 描述          | 可选值               |
 | ------------------- | ------------- | -------------------- |
 | name                | 原始属性 name | --                   |
@ -160,9 +162,15 @@ export default {
 | checked ( v-model ) | 是否选中      | `true` `false`       |
 | change              | 切换事件      | isChecked : 当前状态 |

+:::
+
 ::: title 复选框事件
 :::

+::: table
+
 | 事件   | 描述     | 可选值               |
 | ------ | -------- | -------------------- |
 | change | 切换事件 | isChecked : 当前状态 |
+
+:::
--- a/docs/docs/zh-CN/components/collapse.md
+++ b/docs/docs/zh-CN/components/collapse.md
@ -29,18 +29,24 @@ export default {
 :::

 ::: title Collapse 属性
-
 :::

+::: table
+
 | Name     | Description | Accepted Values |
 | -------- | ----------- | --------------- |
 | openKeys | 打开的目录  | `array`         |

-::: title Collapse-item 属性
-
 :::

+::: title Collapse-item 属性
+:::
+
+::: table
+
 | Name  | Description | Accepted Values |
 | ----- | ----------- | --------------- |
 | id    | 编号        | --              |
 | title | 标题        | --              |
+
+:::
--- a/docs/docs/zh-CN/components/color.md
+++ b/docs/docs/zh-CN/components/color.md
@ -148,6 +148,8 @@ export default {

 :::

+::: table
+
 | Class           | 描述 | 使用                    |
 | --------------- | ---- | ----------------------- |
 | layui-bg-red    | 赤色 | class="layui-bg-red"    |
@ -156,3 +158,5 @@ export default {
 | layui-bg-cyan   | 藏青 | class="layui-bg-cyan"   |
 | layui-bg-blue   | 蓝色 | class="layui-bg-blue"   |
 | layui-bg-black  | 雅黑 | class="layui-bg-black"  |
+
+:::
--- a/docs/docs/zh-CN/components/colorPicker.md
+++ b/docs/docs/zh-CN/components/colorPicker.md
@ -19,8 +19,12 @@ export default {
 ::: title icon-picker 属性
 :::

+::: table
+
 |            |          |     |
 | ---------- | -------- | --- |
 | v-model    | 默认值   | --  |
 | page       | 开启分页 | --  |
 | showSearch | 启用搜索 | --  |
+
+:::
--- a/docs/docs/zh-CN/components/container.md
+++ b/docs/docs/zh-CN/components/container.md
@ -68,6 +68,10 @@ export default {
 ::: title 容器属性
 :::

+::: table
+
 | 属性  | 描述   | 可选值         |
 | ----- | ------ | -------------- |
 | fluid | 流模式 | `true` `false` |
+
+:::
--- a/docs/docs/zh-CN/components/dropdown.md
+++ b/docs/docs/zh-CN/components/dropdown.md
@ -70,13 +70,21 @@ export default {
 ::: title 下拉属性
 :::

+::: table
+
 | 属性    | 描述     | 可选值          |
 | ------- | -------- | --------------- |
 | trigger | 触发方式 | `click` `hover` |

+:::
+
 ::: title 下拉插槽
 :::

+::: table
+
 | 插槽    | 描述     | 可选值 |
 | ------- | -------- | ------ |
 | content | 下拉内容 | --     |
+
+:::
--- a/docs/docs/zh-CN/components/empty.md
+++ b/docs/docs/zh-CN/components/empty.md
@ -47,6 +47,10 @@ export default {
 ::: title empty 属性
 :::

+::: table
+
 | 属性        | 描述     | 可选值 |
 | ----------- | -------- | ------ |
 | description | 描述信息 | --     |
+
+:::
--- a/docs/docs/zh-CN/components/field.md
+++ b/docs/docs/zh-CN/components/field.md
@ -58,9 +58,13 @@ export default {

 :::

-::: title field attributes
+::: title 字段属性
 :::

+::: table
+
 | Name  | Description | Accepted Values |
 | ----- | ----------- | --------------- |
 | title | 标题        | --              |
+
+:::
--- a/docs/docs/zh-CN/components/form.md
+++ b/docs/docs/zh-CN/components/form.md
@ -45,20 +45,32 @@ export default {
 ::: title 表单事件
 :::

+::: table
+
 | Name  | Description | Accepted Values |
 | ----- | ----------- | --------------- |
 | model | 表单绑定值  | --              |

+:::
+
 ::: title 表单事件
 :::

+::: table
+
 | Name   | Description | Accepted Values |
 | ------ | ----------- | --------------- |
 | submit | 提交事件    | --              |

+:::
+
 ::: title 表单项属性
 :::

+::: table
+
 | Name  | Description | Accepted Values |
 | ----- | ----------- | --------------- |
 | label | 标题名称    | --              |
+
+:::
--- a/docs/docs/zh-CN/components/grid.md
+++ b/docs/docs/zh-CN/components/grid.md
@ -139,13 +139,19 @@ export default {
 ::: title 行属性
 :::

+::: table
+
 | 属性  | 描述 | 可选值 |
 | ----- | ---- | ------ |
 | space | 间隔 | 0 - 30 |

+:::
+
 ::: title 列属性
 :::

+::: table
+
 | 属性      | 描述                           | 可选值 |
 | --------- | ------------------------------ | ------ |
 | xs        | 尺寸 - 超小屏幕 (手机<768px)   | 0 - 12 |
@ -156,3 +162,5 @@ export default {
 | sm-offset | 偏移 - 小屏幕 (平板 ≥768px)    | 0 - 12 |
 | md-offset | 偏移 - 中等屏幕 (桌面 ≥992px)  | 0 - 12 |
 | lg-offset | 偏移 - 大型屏幕 (桌面 ≥1200px) | 0 - 12 |
+
+:::
--- a/docs/docs/zh-CN/components/icon.md
+++ b/docs/docs/zh-CN/components/icon.md
@ -1107,9 +1107,13 @@ export default {
 ::: title 图标属性
 :::

+::: table
+
 | 属性   | 描述 | 默认值            |
 | ------ | ---- | ----------------- |
 | type   | 图标 | `layui-icon-home` |
 | prefix | 前缀 | `layui-icon`      |
 | color  | 颜色 | --                |
 | size   | 尺寸 | --                |
+
+:::
--- a/docs/docs/zh-CN/components/iconPicker.md
+++ b/docs/docs/zh-CN/components/iconPicker.md
@ -101,8 +101,12 @@ export default {
 ::: title icon-picker 属性
 :::

+::: table
+
 |            |          |     |
 | ---------- | -------- | --- |
 | v-model    | 默认值   | --  |
 | page       | 开启分页 | --  |
 | showSearch | 启用搜索 | --  |
+
+:::
--- a/docs/docs/zh-CN/components/input.md
+++ b/docs/docs/zh-CN/components/input.md
@ -106,6 +106,8 @@ export default {
 ::: title 输入框属性
 :::

+::: table
+
 | 属性        | 描述          | 可选值         |
 | ----------- | ------------- | -------------- |
 | name        | 原始属性 name | --             |
@ -113,11 +115,17 @@ export default {
 | disabled    | 禁用          | `true` `false` |
 | v-model     | 值            | --             |

+:::
+
 ::: title 输入框属性
 :::

+::: table
+
 | 事件  | 描述            | 参数             |
 | ----- | --------------- | ---------------- |
 | input | 原生 input 事件 | event : 事件对象 |
 | foucs | 原生 foucs 事件 | event : 事件对象 |
 | blur  | 原生 blur 事件  | --               |
+
+:::
--- a/docs/docs/zh-CN/components/layer.md
+++ b/docs/docs/zh-CN/components/layer.md
@ -237,6 +237,8 @@ export default {
 ::: title 弹层属性
 :::

+::: table
+
 | 备注            | 描述          | 默认值  |
 | --------------- | ------------- | ------- |
 | title           | 标题          | --      |
@ -250,4 +252,7 @@ export default {
 | shade           | 开启遮盖      | --      |
 | shadeClose      | 遮盖点击关闭  | --      |
 | zIndex          | 自定义层级    | --      |
-| type            | 类型          | `1`,`2` |
+| type            | 类型          | `1: component` `2: iframe` |
+| closeBtn        | 显示关闭          | true |
+
+:::
--- a/docs/docs/zh-CN/components/layout.md
+++ b/docs/docs/zh-CN/components/layout.md
@ -172,6 +172,8 @@ export default {
 ::: title 布局组件
 :::

+::: table
+
 | 组件       | 描述 |     |
 | ---------- | ---- | --- |
 | lay-layout | 容器 | --  |
@ -180,3 +182,5 @@ export default {
 | lay-side   | 侧边 | --  |
 | lay-body   | 内容 | --  |
 | lay-footer | 底部 | --  |
+
+:::
--- a/docs/docs/zh-CN/components/line.md
+++ b/docs/docs/zh-CN/components/line.md
@ -32,9 +32,12 @@ export default {
 :::

 ::: title 分割属性
-
 :::

+::: table
+
 | Name  | Description | Accepted Values                               |
 | ----- | ----------- | --------------------------------------------- |
 | theme | 主题        | `orange` `green` `cyan` `blue` `black` `gray` |
+
+:::
--- a/docs/docs/zh-CN/components/menu.md
+++ b/docs/docs/zh-CN/components/menu.md
@ -80,14 +80,22 @@ export default {
 ::: title 菜单属性
 :::

-| 属性                  | 描述   | 备注 |
-| --------------------- | ------ | ---- |
-| selectedKey (v-model) | 选中项 | --   |
-| openKeys (v-model)    | 打开项 | --   |
+::: table
+
+| 属性                 | 描述   | 备注 |
+| ---------------------| ------ | ---- |
+| v-model:selectedKey  | 选中项 | --   |
+| v-model:openKeys     | 打开项 | --   |
+
+:::

 ::: title 菜单插槽
 :::

+::: table
+
 | 插槽  | 描述     | 备注 |
 | ----- | -------- | ---- |
 | title | 菜单标题 | --   |
+
+:::
--- a/docs/docs/zh-CN/components/page.md
+++ b/docs/docs/zh-CN/components/page.md
@ -196,6 +196,8 @@ export default {
 ::: title 分页属性
 :::

+::: table
+
 | 属性        | 描述         | 默认值  |
 | ----------- | ------------ | ------- |
 | limit       | 每页数量     | --      |
@ -206,17 +208,27 @@ export default {
 | showRefresh | 显示刷新按钮 | `false` |
 | showSkip    | 显示跳转     | `false` |

+:::
+
 ::: title 分页事件
 :::

+::: table
+
 | 事件 | 描述     | 参数                  |
 | ---- | -------- | --------------------- |
 | jump | 切换回调 | { current: 当前页面 } |

+:::
+
 ::: title 分页插槽
 :::

+::: table
+
 | 插槽 | 描述   | 默认值 |
 | ---- | ------ | ------ |
 | prev | 上一页 | 上一页 |
 | next | 下一页 | 下一页 |
+
+:::
--- a/docs/docs/zh-CN/components/panel.md
+++ b/docs/docs/zh-CN/components/panel.md
@ -24,6 +24,10 @@ export default {
 ::: title 面板插槽
 :::

+::: table
+
 | 插槽    | 描述     | 可选值 |
 | ------- | -------- | ------ |
 | default | 默认插槽 | --     |
+
+:::
--- a/docs/docs/zh-CN/components/progress.md
+++ b/docs/docs/zh-CN/components/progress.md
@ -113,6 +113,8 @@ export default {
 ::: title 进度属性
 :::

+::: table
+
 | 属性     | 描述     | 可选值                                        |
 | -------- | -------- | --------------------------------------------- |
 | percent  | 进度     | --                                            |
@ -121,3 +123,5 @@ export default {
 | text     | 提示     | --                                            |
 | color    | 颜色     | --                                            |
 | showText | 展示描述 | --                                            |
+
+:::
--- a/docs/docs/zh-CN/components/radio.md
+++ b/docs/docs/zh-CN/components/radio.md
@ -97,15 +97,23 @@ export default {
 ::: title 单选框属性
 :::

+::: table
+
 | 属性    | 描述          | 默认值 |
 | ------- | ------------- | ------ |
 | name    | 原始属性 name | --     |
 | label   | 当前值        | --     |
 | v-model | 选中值        | --     |

+:::
+
 ::: title 单选框事件
 :::

+::: table
+
 | 事件   | 描述     | 参数             |
 | ------ | -------- | ---------------- |
 | change | 切换事件 | current : 当前值 |
+
+:::
--- a/docs/docs/zh-CN/components/rate.md
+++ b/docs/docs/zh-CN/components/rate.md
@ -4,7 +4,7 @@
 ::: demo

 <template>
-  <lay-rate></lay-rate>
+  <lay-rate v-model="all1"></lay-rate>
 </template>

 <script>
@ -13,7 +13,10 @@ import { ref } from 'vue';
 export default {
  setup() {

+     const all1 = ref(0)
+
    return {
+      all1
    }
  }
 }
@ -134,8 +137,12 @@ export default {
 ::: title 评分属性
 :::

+::: table
+
 | 属性     | 描述     | 默认值 |
 | -------- | -------- | ------ |
 | v-model  | 评分值   | --     |
 | length   | 评分长度 | --     |
 | readonly | 只读模式 | --     |
+
+:::
--- a/docs/docs/zh-CN/components/select.md
+++ b/docs/docs/zh-CN/components/select.md
@ -58,29 +58,45 @@ export default {
 ::: title select 属性
 :::

+::: table
+
 | Name    | Description    | Accepted Values |
 | ------- | -------------- | --------------- |
 | name    | 原生 name 属性 | --              |
 | v-model | 选中值         | --              |

+:::
+
 ::: title select-option 属性
 :::

+::: table
+
 | Name  | Description | Accepted Values |
 | ----- | ----------- | --------------- |
 | label | 标签        | --              |
 | value | 值          | --              |

+:::
+
 ::: title select-option 插槽
 :::

+::: table
+
 | Name    | Description | Accepted Values |
 | ------- | ----------- | --------------- |
 | default | 默认        | --              |

+:::
+
 ::: title select 事件
 :::

+::: table
+
 | Name   | Description | Accepted Values |
 | ------ | ----------- | --------------- |
 | change | 切换事件    | value           |
+
+:::
--- a/docs/docs/zh-CN/components/switch.md
+++ b/docs/docs/zh-CN/components/switch.md
@ -111,6 +111,8 @@ export default {
 ::: title 开关属性
 :::

+::: table
+
 | 属性          | 描述           | 可选值         |
 | ------------- | -------------- | -------------- |
 | name          | 原生 name 属性 | --             |
@ -119,9 +121,15 @@ export default {
 | active-text   | 启用描述       | `启动`         |
 | inactive-text | 禁用描述       | `禁用`         |

+:::
+
 ::: title 开关事件
 :::

+::: table
+
 | 属性   | 描述     | 可选值           |
 | ------ | -------- | ---------------- |
 | change | 切换事件 | current : 当前值 |
+
+:::
--- a/docs/docs/zh-CN/components/tab.md
+++ b/docs/docs/zh-CN/components/tab.md
@ -167,19 +167,26 @@ export default {
 :::

 ::: title 选项卡属性
-
 :::

+::: table
+
 | 属性        | 描述     | 可选值         |
 | ----------- | -------- | -------------- |
 | v-model     | 当前激活 | --             |
 | type        | 主题样式 | --             |
 | allow-close | 允许关闭 | `true` `false` |

+:::
+
 ::: title 选项卡事件
 :::

+::: table
+
 | 事件   | 描述     | 参数 |
 | ------ | -------- | ---- |
 | change | 选中切换 | --   |
 | close  | 关闭事件 | --   |
+
+:::
--- a/docs/docs/zh-CN/components/table.md
+++ b/docs/docs/zh-CN/components/table.md
@ -195,7 +195,7 @@ export default {
 ::: demo

 <template>
-  <lay-table :columns="columns" id="id" :dataSource="dataSource" v-model:selectedKeys="selectedKeys"  :checkbox="checkbox" :default-toolbar="defaultToolbar" @row="rowClick" @row-double="rowDoubleClick">
+  <lay-table :columns="columns" id="id" :dataSource="dataSource" v-model:selectedKeys="selectedKeys"  :checkbox="checkbox" :default-toolbar="defaultToolbar" @row="rowClick">
    <template v-slot:toolbar>
      <lay-button size="sm">新增</lay-button>
      <lay-button size="sm">删除</lay-button>
@ -271,9 +271,10 @@ export default {
 :::

 ::: title 表格属性
-
 :::

+::: table
+
 | 属性                     | 描述       | 可选值         |
 | ------------------------ | ---------- | -------------- |
 | columns                  | 列配置     | --             |
@ -284,19 +285,27 @@ export default {
 | default-toolbar          | 开启工具栏 | `lg` `md` `sm` |
 | size                     | 尺寸       | --             |

-::: title 表格事件
-
 :::

+::: title 表格事件
+:::
+
+::: table
+
 | 属性       | 描述   | 参数          |
 | ---------- | ------ | ------------- |
 | row        | 行单击 | data : 当前行 |
 | row-double | 行双击 | data : 当前行 |

-::: title 表格插槽
-
 :::

+::: title 表格插槽
+:::
+
+::: table
+
 | 插槽    | 描述         | 默认 |
 | ------- | ------------ | ---- |
 | toolbar | 自定义工具栏 | --   |
+
+:::
--- a/docs/docs/zh-CN/components/textarea.md
+++ b/docs/docs/zh-CN/components/textarea.md
@ -85,6 +85,8 @@ export default {
 ::: title 文本域属性
 :::

+::: table
+
 | 属性        | 描述          | 可选值         |
 | ----------- | ------------- | -------------- |
 | name        | 原始属性 name | --             |
@ -92,11 +94,17 @@ export default {
 | disabled    | 禁用          | `true` `false` |
 | v-model     | 值            | --             |

+:::
+
 ::: title 文本域事件
 :::

+::: table
+
 | 事件  | 描述            | 可选值           |
 | ----- | --------------- | ---------------- |
 | input | 原生 input 事件 | event : 事件对象 |
 | foucs | 原生 foucs 事件 | event : 事件对象 |
 | blur  | 原生 blur 事件  | --               |
+
+:::
--- a/docs/docs/zh-CN/components/timeline.md
+++ b/docs/docs/zh-CN/components/timeline.md
@ -73,10 +73,13 @@ export default {
 :::

 ::: title timeline-item attributes
-
 :::

+::: table
+
 |        |          |     |
 | ------ | -------- | --- |
 | simple | 简单模式 | --  |
 | title  | 标题     | --  |
+
+:::
--- a/docs/docs/zh-CN/components/transfer.md
+++ b/docs/docs/zh-CN/components/transfer.md
@ -86,15 +86,23 @@ export default {
 ::: title transfer 属性
 :::

+::: table
+
 | Name       | Description | Accepted Values |
 | ---------- | ----------- | --------------- |
 | dataSource | 数据来源    | --              |
 | title      | 标题        | --              |
 | id         | 主键        | --              |

+:::
+
 ::: title transfer 插槽
 :::

+::: table
+
 | Name | Description | Accepted Values |
 | ---- | ----------- | --------------- |
 | item | 列表项      | { data }        |
+
+:::
--- a/docs/docs/zh-CN/components/tree.md
+++ b/docs/docs/zh-CN/components/tree.md
@ -214,9 +214,10 @@ function handleClick(node) {
 :::

 ::: title tree attributes
-
 :::

+::: table
+
 | Name                             | Description                              | Accepted Values |
 | -------------------------------- | ---------------------------------------- | --------------- |
 | data                             | 树型组件数据,类型 TreeData \| TreeData[] | null            |
@ -225,9 +226,13 @@ function handleClick(node) {
 | showLine                         | 是否开启连接线                           | true            |
 | checkedKeys(v-model:checkedKeys) | 开启 showCheckbox 后, 选中的节点         | []              |

-::: title TreeData
-
 :::
+
+::: title TreeData
+:::
+
+::: table
+
 | Name | Description | Accepted Values |
 | -------- | ---- | ----------------------- |
 | id | 唯一值 | - |
@ -236,10 +241,15 @@ function handleClick(node) {
 | disabled | 该节点是否禁用 | false |
 | spread | 该节点是否展开 | false | - |

-::: title tree events
-
 :::

+::: title tree events
+:::
+
+::: table
+
 | Name       | Description     | Accepted Params |
 | ---------- | --------------- | --------------- |
 | node-click | 节点 click 事件 | --              |
+
+:::
--- a/docs/docs/zh-CN/guide/changelog.md
+++ b/docs/docs/zh-CN/guide/changelog.md
@ -11,8 +11,13 @@
 <template>
 <lay-timeline>
 <lay-timeline-item title="0.2.3">
+[新增] table 表格 列筛选功能。<br>
 [新增] table 表格 row 行单击, row-double 行双击事件。<br>
+[新增] layer 弹层 closeBtn 属性, 允许隐藏关闭操作。<br>
+[修复] mackdown 文档 table 样式对 table 组件的污染。<br>
 [优化] layer 弹层 border 样式。<br>
+[优化] carousel 轮播逻辑, 允许循环切换。<br>
+[升级] vue-router 4.0.12 版本。<br>
 [升级] vue 3.2.21 版本。<br>
 </lay-timeline-item>
 <lay-timeline-item title="0.2.2">
--- a/docs/docs/zh-CN/hooks/useClickOutside.md
+++ b/docs/docs/zh-CN/hooks/useClickOutside.md
@ -33,6 +33,10 @@ export default {
 ::: title 使用备注
 :::

+::: table
+
 | 备注           | 描述            | 类型 |
 | -------------- | --------------- | ---- |
 | isClickOutside | 使用 watch 监听 | Ref  |
+
+:::
--- a/docs/docs/zh-CN/hooks/useFullScreen.md
+++ b/docs/docs/zh-CN/hooks/useFullScreen.md
@ -32,7 +32,11 @@ export default {
 ::: title 使用备注
 :::

+::: table
+
 | 事件         | 描述     | 类型     |
 | ------------ | -------- | -------- |
 | fullScreen   | 全屏切换 | Function |
 | isFullScreen | 当前状态 | Ref      |
+
+::: 
--- a/docs/docs/zh-CN/hooks/useMove.md
+++ b/docs/docs/zh-CN/hooks/useMove.md
@ -28,6 +28,10 @@ export default {
 ::: title 使用备注
 :::

+::: table
+
 | 备注 | 描述           | 类型        |
 | ---- | -------------- | ----------- |
 | el   | 需要拖拽的元素 | HtmlElement |
+
+:::
--- a/docs/src/components/LayCode.vue
+++ b/docs/src/components/LayCode.vue
@ -1,6 +1,6 @@
 <template>
  <div class="lay-code">
-    <div class="source">
+    <div class="source" id="source">
      <slot />
    </div>
    <div ref="meta" class="meta">
@ -16,7 +16,7 @@
      class="control"
    >
      <i
-        class="layui-icon layui-icon-file"
+        class="layui-icon layui-icon-file" @click="copy"
      />
      <i
        class="layui-icon layui-icon-fonts-code"  @click="toggle"
@ -38,6 +38,12 @@ const toggle = function () {
  show.value = !show.value
 }

+const copy = function () {
+  var Url2  =document.getElementById("source") as any;
+  Url2.select();
+  document.execCommand("Copy");
+}
+
 onMounted(() => {
  const foundDescs = meta.value.getElementsByClassName('description')
  const foundCodes = meta.value.getElementsByClassName('language-html')
--- a/docs/src/components/LayTableBox.vue
+++ b/docs/src/components/LayTableBox.vue
@ -0,0 +1,37 @@
+<template>
+    <div class="lay-table-box">
+        <slot></slot>
+    </div>
+</template>
+<style>
+.lay-table-box table {
+  width: 100%; /*表格宽度*/
+  border-collapse: collapse; /*使用单一线条的边框*/
+  empty-cells: show; /*单元格无内容依旧绘制边框*/
+  border-right: 1px solid whitesmoke;
+  border-left: 1px solid whitesmoke;
+  border-radius: 4px;
+}
+
+.lay-table-box table th,
+.lay-table-box table td {
+  font-size: 14px;
+  width: 160px;
+  max-width: 160px;
+  height: 50px; /*统一每一行的默认高度*/
+  border-top: 1px solid whitesmoke; /*内部边框样式*/
+  padding: 0 10px; /*内边距*/
+  padding-left: 28px;
+}
+
+.lay-table-box table th {
+  color: #666;
+  font-weight: 500;
+  white-space: nowrap; /*表头内容强制在一行显示*/
+  background-color: #fafafa;
+}
+
+.lay-table-box table td {
+  white-space: nowrap;
+}
+</style>
--- a/docs/src/main.ts
+++ b/docs/src/main.ts
@ -5,6 +5,7 @@ import { Router } from 'vue-router'
 import Layui from '/@src/index'
 import LayCode from './components/LayCode.vue'
 import LaySearch from './components/LaySearch.vue'
+import LayTableBox from './components/LayTableBox.vue'
 import './styles/index.css'

 export function createApp(): {
@ -21,6 +22,7 @@ export function createApp(): {
    .use(router)
    .component('LayCode', LayCode)
    .component('LaySearch', LaySearch)
+    .component('LayTableBox', LayTableBox)
    .use(Layui)

  return { app, router }
--- a/docs/src/plugin/common-plugins.ts
+++ b/docs/src/plugin/common-plugins.ts
@ -7,6 +7,7 @@ import demo from './demo'
 import createTitle from './create-title'
 import createBlock from './create-block'
 import createDescribe from './create-describe'
+import createTable from './create-table'
 import preWrapper from './pre-wrapper'

 const plugins = [
@ -24,9 +25,10 @@ const plugins = [
      md.use(snippet)
        .use(preWrapper)
        .use(container, 'demo', demo)
-        .use(...createBlock('block', '描述信息'))
-        .use(...createTitle('title', '标题信息'))
-        .use(...createDescribe('describe', '描述信息'))
+        .use(...createTable('table',''))
+        .use(...createBlock('block', ''))
+        .use(...createTitle('title', ''))
+        .use(...createDescribe('describe', ''))
    },
  }),
 ] as any
--- a/docs/src/plugin/create-table.ts
+++ b/docs/src/plugin/create-table.ts
@ -0,0 +1,31 @@
+import container from 'markdown-it-container'
+import type Token from 'markdown-it/lib/token'
+
+type ContainerArgs = [
+  typeof container,
+  string,
+  {
+    render(tokens: Token[], idx: number): string
+  }
+]
+
+export default function createContainer(
+  klass: string,
+  defaultTitle: string
+): ContainerArgs {
+  return [
+    container,
+    klass,
+    {
+      render(tokens, idx) {
+        const token = tokens[idx]
+        const info = token.info.trim().slice(klass.length).trim()
+        if (token.nesting === 1) {
+          return `<lay-table-box>${info}`
+        } else {
+          return '</lay-table-box>\n'
+        }
+      },
+    },
+  ]
+}
--- a/docs/src/styles/index.css
+++ b/docs/src/styles/index.css
@ -1,4 +1,4 @@
@import './code.css';
@import './custom-blocks.css';
@import './markdown.css';
-@import './vars.css';
+@import './vars.css';
--- a/docs/src/styles/markdown.css
+++ b/docs/src/styles/markdown.css
@ -114,36 +114,6 @@ form {
  margin: 0;
 }

-table {
-  width: 100%; /*表格宽度*/
-  border-collapse: collapse; /*使用单一线条的边框*/
-  empty-cells: show; /*单元格无内容依旧绘制边框*/
-  border-right: 1px solid whitesmoke;
-  border-left: 1px solid whitesmoke;
-  border-radius: 4px;
-}
-
-table th,
-table td {
-  font-size: 14px;
-  width: 160px;
-  max-width: 160px;
-  height: 50px; /*统一每一行的默认高度*/
-  border-top: 1px solid whitesmoke; /*内部边框样式*/
-  padding: 0 10px; /*内边距*/
-  padding-left: 28px;
-}
-
-table th {
-  color: #666;
-  font-weight: 500;
-  white-space: nowrap; /*表头内容强制在一行显示*/
-  background-color: #fafafa;
-}
-table td {
-  white-space: nowrap;
-}
-
 .source .layui-avatar {
  margin-right: 30px;
 }
--- a/package.json
+++ b/package.json
@ -40,11 +40,11 @@
  "homepage": "https://gitee.com/layui-vue/layui-vue/blob/master/README.md",
  "peerDependencies": {
    "vue": "^3.2.21",
-    "vue-router": "^4.0.11"
+    "vue-router": "^4.0.12"
  },
  "dependencies": {
    "vue": "^3.2.21",
-    "vue-router": "^4.0.11"
+    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@babel/core": "^7.15.8",
--- a/src/css/layui.css
+++ b/src/css/layui.css
@ -3793,7 +3793,6 @@ a cite {
 .layui-table-cell {
  height: 28px;
  line-height: 28px;
-  padding: 0 15px;
  position: relative;
  box-sizing: border-box;
 }
--- a/src/module/carousel/index.vue
+++ b/src/module/carousel/index.vue
@ -87,7 +87,7 @@ const prev = function () {
  for (var i = 0; i < slots.length; i++) {
    if (slots[i].props.id === active.value) {
      if (i === 0) {
-        return false
+        active.value = slots[slots.length - 1].props.id
      }
      active.value = slots[i - 1].props.id
      break
@ -99,7 +99,7 @@ const next = function () {
  for (var i = 0; i < slots.length; i++) {
    if (slots[i].props.id === active.value) {
      if (i === slots.length - 1) {
-        return false
+        active.value = slots[0].props.id
      }
      active.value = slots[i + 1].props.id
      break
--- a/src/module/layer/index.vue
+++ b/src/module/layer/index.vue
@ -59,6 +59,7 @@
        @click="maxHandle"
      ></a>
      <a
+        v-if="closeBtn"
        class="layui-layer-ico layui-layer-close layui-layer-close1"
        href="javascript:;"
        @click="closeHandle"
@ -111,6 +112,7 @@ const props = withDefaults(
    content?: string
    shade?: boolean
    shadeClose?: boolean
+    closeBtn?: boolean
  }>(),
  {
    id: 'layer',
@ -126,6 +128,7 @@ const props = withDefaults(
    btn: () => [],
    shade: false,
    shadeClose: true,
+    closeBtn: true,
  }
 )

--- a/src/module/rate/index.vue
+++ b/src/module/rate/index.vue
@ -1,29 +1,30 @@
 <template>
  <ul class="layui-rate">
    <li
-      v-for="(rate, index) in rates"
-      :key="rate"
+      v-for="index of length"
+      :key="index"
      class="layui-inline"
-      @mouseenter="mouseenter(index)"
+      @mouseenter="mouseenter(index, $event)"
    >
      <i
-        v-if="rate"
+        v-if="index <= currentValue"
        class="layui-icon layui-icon-rate-solid"
        :style="{ color: theme }"
      />
      <i v-else class="layui-icon layui-icon-rate" :style="{ color: theme }" />
    </li>
+    {{
+      currentValue
+    }}
  </ul>
 </template>
 <script setup lang="ts">
-import { defineProps, Ref, ref, watch, withDefaults } from 'vue'
-
-const rates: Ref<Array<boolean>> = ref([])
+import { computed, defineProps, Ref, ref, watch, withDefaults } from 'vue'

 const props = withDefaults(
  defineProps<{
    length?: number
-    modelValue?: number
+    modelValue: number
    character?: string
    readonly?: boolean
    theme?: string
@ -35,32 +36,21 @@ const props = withDefaults(
  }
 )

-watch(
-  props,
-  function () {
-    rates.value = []
-    for (let index = 0; index < props.length; index++) {
-      rates.value.push(false)
-    }
-    for (let index = props.modelValue - 1; index >= 0; index--) {
-      rates.value[index] = true
-    }
-  },
-  { deep: true, immediate: true }
-)
-
 const emit = defineEmits(['update:modelValue'])

-const mouseenter = function (index: number) {
+const currentValue = computed({
+  get: function () {
+    return props.modelValue
+  },
+  set: function (val) {
+    emit('update:modelValue', val)
+  },
+})
+
+const mouseenter = function (index: number, event: any) {
  if (props.readonly) {
    return false
  }
-  for (let i = index; i >= 0; i--) {
-    rates.value[i] = true
-  }
-  for (let i = index + 1; i < props.length; i++) {
-    rates.value[i] = false
-  }
-  emit('update:modelValue', index + 1)
+  currentValue.value = index
 }
 </script>
--- a/src/module/table/component/checkbox.vue
+++ b/src/module/table/component/checkbox.vue
@ -1,5 +1,5 @@
 <template>
-  <span @click.stop="handleClick">
+  <div @click.stop="handleClick">
    <input type="checkbox" :name="name" :value="label" />
    <div
      class="layui-unselect"
@ -15,7 +15,7 @@
      <span><slot /></span>
      <i class="layui-icon layui-icon-ok" />
    </div>
-  </span>
+  </div>
 </template>

 <script setup name="LayCheckbox" lang="ts">
--- a/src/module/table/index.vue
+++ b/src/module/table/index.vue
@ -9,6 +9,23 @@
          <slot name="toolbar"></slot>
        </div>
        <div v-if="defaultToolbar" class="layui-table-tool-self">
+          <lay-dropdown>
+            <div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS">
+              <i class="layui-icon layui-icon-cols"></i>
+            </div>
+            <template #content>
+              <div style="padding:10px">
+              <table-item-checkbox
+                skin="primary"
+                v-for="column in columns"
+                v-model="tableColumns"
+                :label="column"
+                :key="column"
+                >{{ column.title }}</table-item-checkbox
+              >
+              </div>
+            </template>
+          </lay-dropdown>
          <div
            class="layui-inline"
            title="打印"
@ -36,14 +53,16 @@
                    />
                  </div>
                </th>
-                <th v-for="column in columns" :key="column">
-                  <div
-                    class="layui-table-cell"
-                    :style="{ width: column.width }"
-                  >
-                    <span>{{ column.title }}</span>
-                  </div>
-                </th>
+                <template v-for="column in columns" :key="column">
+                  <th v-if="tableColumns.includes(column)">
+                    <div
+                      class="layui-table-cell"
+                      :style="{ width: column.width }"
+                    >
+                      <span>{{ column.title }}</span>
+                    </div>
+                  </th>
+                </template>
              </tr>
            </thead>
          </table>
@ -67,28 +86,31 @@
                      </table-item-checkbox>
                    </div>
                  </td>
-                  <template v-for="column in columns" :key="column">
-                    <template v-if="column.customSlot">
-                      <td class="layui-table-cell">
-                        <div :style="{ width: column.width }">
-                          <slot :name="column.customSlot" :data="data" />
-                        </div>
-                      </td>
-                    </template>

-                    <template
-                      v-for="(value, key, index) in data"
-                      v-else
-                      :key="index"
-                    >
-                      <td v-if="column.key == key" class="layui-table-cell">
-                        <div :style="{ width: column.width }">
-                          <span v-if="column.slot">
-                            <slot :name="column.slot" :data="data" />
-                          </span>
-                          <span v-else> {{ value }} </span>
-                        </div>
-                      </td>
+                  <template v-for="column in columns" :key="column">
+                    <template v-if="tableColumns.includes(column)">
+                      <template v-if="column.customSlot">
+                        <td class="layui-table-cell">
+                          <div :style="{ width: column.width }">
+                            <slot :name="column.customSlot" :data="data" />
+                          </div>
+                        </td>
+                      </template>
+
+                      <template
+                        v-else
+                        v-for="(value, key) in data"
+                        :key="value"
+                      >
+                        <td v-if="column.key == key" class="layui-table-cell">
+                          <div :style="{ width: column.width }">
+                            <span v-if="column.slot">
+                              <slot :name="column.slot" :data="data" />
+                            </span>
+                            <span v-else> {{ value }} </span>
+                          </div>
+                        </td>
+                      </template>
                    </template>
                  </template>
                </tr>
@ -132,7 +154,7 @@ import {
  useSlots,
  watch,
  withDefaults,
-  defineEmits,
+  defineEmits
 } from 'vue'
 import { Recordable } from '/@src/module/type'

@ -167,6 +189,7 @@ const slots = slot.default && slot.default()

 const allChecked = ref(false)
 const tableSelectedKeys = ref([...props.selectedKeys])
+const tableColumns = ref([...props.columns])

 const changeAll = function ({ checked, value }: any) {
  const ids = props.dataSource.map((item: any) => {
@ -216,3 +239,12 @@ const print = function () {
  document.body.innerHTML = oldContent
 }
 </script>
+
+<style scoped>
+.laytable-cell-checkbox {
+  width: 34px;
+}
+.layui-table-col-special {
+  width: 34px;
+}
+</style>