perf(table): 新增 列筛选 功能
This commit is contained in:
		
							parent
							
								
									e42cedab18
								
							
						
					
					
						commit
						a543780188
					
				@ -91,4 +91,4 @@ export default {
 | 
			
		||||
| layui-anim-rotate                 | 360 度旋转   | `layui-anim layui-anim-rotate`                 |
 | 
			
		||||
| layui-anim-rotate layui-anim-loop | 循环动画     | `layui-anim layui-anim-rotate layui-anim-loop` |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -91,4 +91,4 @@ export default {
 | 
			
		||||
| size   | 尺寸 | `xs` `sm` `lg` |
 | 
			
		||||
| radius | 圆形 | `true` `false` |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -46,4 +46,4 @@ export default {
 | 
			
		||||
| type  | 类型 | `dot` `rim`                                   |
 | 
			
		||||
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -56,4 +56,4 @@ export default {
 | 
			
		||||
| ---- | ----------- | --------------- |
 | 
			
		||||
| nm   | 灰色样式    | --              |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -99,4 +99,4 @@ export default {
 | 
			
		||||
| ------- | -------- | ------ |
 | 
			
		||||
| default | 默认插槽 | `--`   |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -285,13 +285,13 @@ export default {
 | 
			
		||||
 | 
			
		||||
::: table
 | 
			
		||||
 | 
			
		||||
| 属性   | 描述         | 可选值                              |
 | 
			
		||||
| ------ | -----------  | --------------------------------------------- |
 | 
			
		||||
| type   | 主题         | `primary` `normal` `warm` `danger` `disabled` |
 | 
			
		||||
| size   | 尺寸         | `lg` `sm` `xs`                                |
 | 
			
		||||
| fluid  | 最大化       | `true` `false`                                |
 | 
			
		||||
| radius | 圆角         | `true` `false`                                |
 | 
			
		||||
| border | 边框         | `green` `blue` `orange` `red` `black`         |
 | 
			
		||||
| 属性   | 描述   | 可选值                                        |
 | 
			
		||||
| ------ | ------ | --------------------------------------------- |
 | 
			
		||||
| type   | 主题   | `primary` `normal` `warm` `danger` `disabled` |
 | 
			
		||||
| size   | 尺寸   | `lg` `sm` `xs`                                |
 | 
			
		||||
| fluid  | 最大化 | `true` `false`                                |
 | 
			
		||||
| radius | 圆角   | `true` `false`                                |
 | 
			
		||||
| border | 边框   | `green` `blue` `orange` `red` `black`         |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -300,9 +300,8 @@ export default {
 | 
			
		||||
 | 
			
		||||
::: table
 | 
			
		||||
 | 
			
		||||
| 事件   | 描述         | 参数                              | 
 | 
			
		||||
| ------ | -----------  | --------------------------------------------- |
 | 
			
		||||
| click   | 单击事件         | `--` |
 | 
			
		||||
| 事件  | 描述     | 参数 |
 | 
			
		||||
| ----- | -------- | ---- |
 | 
			
		||||
| click | 单击事件 | `--` |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -126,4 +126,4 @@ export default {
 | 
			
		||||
| header | 头部插槽 | --     |
 | 
			
		||||
| body   | 内容插槽 | --     |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -138,4 +138,4 @@ export default {
 | 
			
		||||
| ------ | -------- | ------ |
 | 
			
		||||
| change | 切换回调 | id     |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -49,4 +49,4 @@ export default {
 | 
			
		||||
| id    | 编号        | --              |
 | 
			
		||||
| title | 标题        | --              |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -159,4 +159,4 @@ export default {
 | 
			
		||||
| layui-bg-blue   | 蓝色 | class="layui-bg-blue"   |
 | 
			
		||||
| layui-bg-black  | 雅黑 | class="layui-bg-black"  |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -27,4 +27,4 @@ export default {
 | 
			
		||||
| page       | 开启分页 | --  |
 | 
			
		||||
| showSearch | 启用搜索 | --  |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -74,4 +74,4 @@ export default {
 | 
			
		||||
| ----- | ------ | -------------- |
 | 
			
		||||
| fluid | 流模式 | `true` `false` |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -87,4 +87,4 @@ export default {
 | 
			
		||||
| ------- | -------- | ------ |
 | 
			
		||||
| content | 下拉内容 | --     |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -53,4 +53,4 @@ export default {
 | 
			
		||||
| ----------- | -------- | ------ |
 | 
			
		||||
| description | 描述信息 | --     |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -67,4 +67,4 @@ export default {
 | 
			
		||||
| ----- | ----------- | --------------- |
 | 
			
		||||
| title | 标题        | --              |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -73,4 +73,4 @@ export default {
 | 
			
		||||
| ----- | ----------- | --------------- |
 | 
			
		||||
| label | 标题名称    | --              |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -163,4 +163,4 @@ export default {
 | 
			
		||||
| md-offset | 偏移 - 中等屏幕 (桌面 ≥992px)  | 0 - 12 |
 | 
			
		||||
| lg-offset | 偏移 - 大型屏幕 (桌面 ≥1200px) | 0 - 12 |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -1116,4 +1116,4 @@ export default {
 | 
			
		||||
| color  | 颜色 | --                |
 | 
			
		||||
| size   | 尺寸 | --                |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -109,4 +109,4 @@ export default {
 | 
			
		||||
| page       | 开启分页 | --  |
 | 
			
		||||
| showSearch | 启用搜索 | --  |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -128,4 +128,4 @@ export default {
 | 
			
		||||
| foucs | 原生 foucs 事件 | event : 事件对象 |
 | 
			
		||||
| blur  | 原生 blur 事件  | --               |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -239,20 +239,20 @@ export default {
 | 
			
		||||
 | 
			
		||||
::: table
 | 
			
		||||
 | 
			
		||||
| 备注            | 描述          | 默认值  |
 | 
			
		||||
| --------------- | ------------- | ------- |
 | 
			
		||||
| title           | 标题          | --      |
 | 
			
		||||
| move            | 允许拖拽      | `false` |
 | 
			
		||||
| maxmin          | 最小化 最大化 | `false` |
 | 
			
		||||
| offset          | 位置          | --      |
 | 
			
		||||
| width           | 宽            | --      |
 | 
			
		||||
| height          | 高            | --      |
 | 
			
		||||
| v-model:visible | 展示 隐藏     | false   |
 | 
			
		||||
| content         | 内容          | --      |
 | 
			
		||||
| shade           | 开启遮盖      | --      |
 | 
			
		||||
| shadeClose      | 遮盖点击关闭  | --      |
 | 
			
		||||
| zIndex          | 自定义层级    | --      |
 | 
			
		||||
| 备注            | 描述          | 默认值                     |
 | 
			
		||||
| --------------- | ------------- | -------------------------- |
 | 
			
		||||
| title           | 标题          | --                         |
 | 
			
		||||
| move            | 允许拖拽      | `false`                    |
 | 
			
		||||
| maxmin          | 最小化 最大化 | `false`                    |
 | 
			
		||||
| offset          | 位置          | --                         |
 | 
			
		||||
| width           | 宽            | --                         |
 | 
			
		||||
| height          | 高            | --                         |
 | 
			
		||||
| v-model:visible | 展示 隐藏     | false                      |
 | 
			
		||||
| content         | 内容          | --                         |
 | 
			
		||||
| shade           | 开启遮盖      | --                         |
 | 
			
		||||
| shadeClose      | 遮盖点击关闭  | --                         |
 | 
			
		||||
| zIndex          | 自定义层级    | --                         |
 | 
			
		||||
| type            | 类型          | `1: component` `2: iframe` |
 | 
			
		||||
| closeBtn        | 显示关闭          | true |
 | 
			
		||||
| closeBtn        | 显示关闭      | true                       |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -183,4 +183,4 @@ export default {
 | 
			
		||||
| lay-body   | 内容 | --  |
 | 
			
		||||
| lay-footer | 底部 | --  |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -40,4 +40,4 @@ export default {
 | 
			
		||||
| ----- | ----------- | --------------------------------------------- |
 | 
			
		||||
| theme | 主题        | `orange` `green` `cyan` `blue` `black` `gray` |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -82,10 +82,10 @@ export default {
 | 
			
		||||
 | 
			
		||||
::: table
 | 
			
		||||
 | 
			
		||||
| 属性                 | 描述   | 备注 |
 | 
			
		||||
| ---------------------| ------ | ---- |
 | 
			
		||||
| v-model:selectedKey  | 选中项 | --   |
 | 
			
		||||
| v-model:openKeys     | 打开项 | --   |
 | 
			
		||||
| 属性                | 描述   | 备注 |
 | 
			
		||||
| ------------------- | ------ | ---- |
 | 
			
		||||
| v-model:selectedKey | 选中项 | --   |
 | 
			
		||||
| v-model:openKeys    | 打开项 | --   |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -98,4 +98,4 @@ export default {
 | 
			
		||||
| ----- | -------- | ---- |
 | 
			
		||||
| title | 菜单标题 | --   |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -231,4 +231,4 @@ export default {
 | 
			
		||||
| prev | 上一页 | 上一页 |
 | 
			
		||||
| next | 下一页 | 下一页 |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -30,4 +30,4 @@ export default {
 | 
			
		||||
| ------- | -------- | ------ |
 | 
			
		||||
| default | 默认插槽 | --     |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -124,4 +124,4 @@ export default {
 | 
			
		||||
| color    | 颜色     | --                                            |
 | 
			
		||||
| showText | 展示描述 | --                                            |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -116,4 +116,4 @@ export default {
 | 
			
		||||
| ------ | -------- | ---------------- |
 | 
			
		||||
| change | 切换事件 | current : 当前值 |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -145,4 +145,4 @@ export default {
 | 
			
		||||
| length   | 评分长度 | --     |
 | 
			
		||||
| readonly | 只读模式 | --     |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -99,4 +99,4 @@ export default {
 | 
			
		||||
| ------ | ----------- | --------------- |
 | 
			
		||||
| change | 切换事件    | value           |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -132,4 +132,4 @@ export default {
 | 
			
		||||
| ------ | -------- | ---------------- |
 | 
			
		||||
| change | 切换事件 | current : 当前值 |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -189,4 +189,4 @@ export default {
 | 
			
		||||
| change | 选中切换 | --   |
 | 
			
		||||
| close  | 关闭事件 | --   |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -308,4 +308,4 @@ export default {
 | 
			
		||||
| ------- | ------------ | ---- |
 | 
			
		||||
| toolbar | 自定义工具栏 | --   |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -107,4 +107,4 @@ export default {
 | 
			
		||||
| foucs | 原生 foucs 事件 | event : 事件对象 |
 | 
			
		||||
| blur  | 原生 blur 事件  | --               |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -82,4 +82,4 @@ export default {
 | 
			
		||||
| simple | 简单模式 | --  |
 | 
			
		||||
| title  | 标题     | --  |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -105,4 +105,4 @@ export default {
 | 
			
		||||
| ---- | ----------- | --------------- |
 | 
			
		||||
| item | 列表项      | { data }        |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -233,13 +233,13 @@ function handleClick(node) {
 | 
			
		||||
 | 
			
		||||
::: table
 | 
			
		||||
 | 
			
		||||
| Name | Description | Accepted Values |
 | 
			
		||||
| -------- | ---- | ----------------------- |
 | 
			
		||||
| id | 唯一值 | - |
 | 
			
		||||
| title | 节点名称 | - |
 | 
			
		||||
| children | 子节点 | [] |
 | 
			
		||||
| disabled | 该节点是否禁用 | false |
 | 
			
		||||
| spread | 该节点是否展开 | false | - |
 | 
			
		||||
| Name     | Description    | Accepted Values |
 | 
			
		||||
| -------- | -------------- | --------------- | --- |
 | 
			
		||||
| id       | 唯一值         | -               |
 | 
			
		||||
| title    | 节点名称       | -               |
 | 
			
		||||
| children | 子节点         | []              |
 | 
			
		||||
| disabled | 该节点是否禁用 | false           |
 | 
			
		||||
| spread   | 该节点是否展开 | false           | -   |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -252,4 +252,4 @@ function handleClick(node) {
 | 
			
		||||
| ---------- | --------------- | --------------- |
 | 
			
		||||
| node-click | 节点 click 事件 | --              |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -39,4 +39,4 @@ export default {
 | 
			
		||||
| -------------- | --------------- | ---- |
 | 
			
		||||
| isClickOutside | 使用 watch 监听 | Ref  |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -39,4 +39,4 @@ export default {
 | 
			
		||||
| fullScreen   | 全屏切换 | Function |
 | 
			
		||||
| isFullScreen | 当前状态 | Ref      |
 | 
			
		||||
 | 
			
		||||
::: 
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -34,4 +34,4 @@ export default {
 | 
			
		||||
| ---- | -------------- | ----------- |
 | 
			
		||||
| el   | 需要拖拽的元素 | HtmlElement |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
@ -1,6 +1,6 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="lay-code">
 | 
			
		||||
    <div class="source" id="source">
 | 
			
		||||
    <div id="source" class="source">
 | 
			
		||||
      <slot />
 | 
			
		||||
    </div>
 | 
			
		||||
    <div ref="meta" class="meta">
 | 
			
		||||
@ -11,16 +11,9 @@
 | 
			
		||||
        <slot name="code" />
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div
 | 
			
		||||
      :class="{ 'is-fixed': isFixContorl }"
 | 
			
		||||
      class="control"
 | 
			
		||||
    >
 | 
			
		||||
      <i
 | 
			
		||||
        class="layui-icon layui-icon-file" @click="copy"
 | 
			
		||||
      />
 | 
			
		||||
      <i
 | 
			
		||||
        class="layui-icon layui-icon-fonts-code"  @click="toggle"
 | 
			
		||||
      />
 | 
			
		||||
    <div :class="{ 'is-fixed': isFixContorl }" class="control">
 | 
			
		||||
      <i class="layui-icon layui-icon-file" @click="copy" />
 | 
			
		||||
      <i class="layui-icon layui-icon-fonts-code" @click="toggle" />
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
@ -39,9 +32,9 @@ const toggle = function () {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const copy = function () {
 | 
			
		||||
  var Url2  =document.getElementById("source") as any;
 | 
			
		||||
  Url2.select();
 | 
			
		||||
  document.execCommand("Copy");
 | 
			
		||||
  var Url2 = document.getElementById('source') as any
 | 
			
		||||
  Url2.select()
 | 
			
		||||
  document.execCommand('Copy')
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
onMounted(() => {
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,7 @@
 | 
			
		||||
<template>
 | 
			
		||||
    <div class="lay-table-box">
 | 
			
		||||
        <slot></slot>
 | 
			
		||||
    </div>
 | 
			
		||||
  <div class="lay-table-box">
 | 
			
		||||
    <slot></slot>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
<style>
 | 
			
		||||
.lay-table-box table {
 | 
			
		||||
@ -34,4 +34,4 @@
 | 
			
		||||
.lay-table-box table td {
 | 
			
		||||
  white-space: nowrap;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
@ -25,7 +25,7 @@ const plugins = [
 | 
			
		||||
      md.use(snippet)
 | 
			
		||||
        .use(preWrapper)
 | 
			
		||||
        .use(container, 'demo', demo)
 | 
			
		||||
        .use(...createTable('table',''))
 | 
			
		||||
        .use(...createTable('table', ''))
 | 
			
		||||
        .use(...createBlock('block', ''))
 | 
			
		||||
        .use(...createTitle('title', ''))
 | 
			
		||||
        .use(...createDescribe('describe', ''))
 | 
			
		||||
 | 
			
		||||
@ -1,4 +1,4 @@
 | 
			
		||||
@import './code.css';
 | 
			
		||||
@import './custom-blocks.css';
 | 
			
		||||
@import './markdown.css';
 | 
			
		||||
@import './vars.css';
 | 
			
		||||
@import './vars.css';
 | 
			
		||||
 | 
			
		||||
@ -14,15 +14,15 @@
 | 
			
		||||
              <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 style="padding: 10px">
 | 
			
		||||
                <table-item-checkbox
 | 
			
		||||
                  v-for="column in columns"
 | 
			
		||||
                  :key="column"
 | 
			
		||||
                  v-model="tableColumns"
 | 
			
		||||
                  skin="primary"
 | 
			
		||||
                  :label="column"
 | 
			
		||||
                  >{{ column.title }}</table-item-checkbox
 | 
			
		||||
                >
 | 
			
		||||
              </div>
 | 
			
		||||
            </template>
 | 
			
		||||
          </lay-dropdown>
 | 
			
		||||
@ -98,8 +98,8 @@
 | 
			
		||||
                      </template>
 | 
			
		||||
 | 
			
		||||
                      <template
 | 
			
		||||
                        v-else
 | 
			
		||||
                        v-for="(value, key) in data"
 | 
			
		||||
                        v-else
 | 
			
		||||
                        :key="value"
 | 
			
		||||
                      >
 | 
			
		||||
                        <td v-if="column.key == key" class="layui-table-cell">
 | 
			
		||||
@ -154,7 +154,7 @@ import {
 | 
			
		||||
  useSlots,
 | 
			
		||||
  watch,
 | 
			
		||||
  withDefaults,
 | 
			
		||||
  defineEmits
 | 
			
		||||
  defineEmits,
 | 
			
		||||
} from 'vue'
 | 
			
		||||
import { Recordable } from '/@src/module/type'
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user