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

This commit is contained in:
就眠仪式 2021-11-07 15:56:24 +08:00
parent e42cedab18
commit a543780188
45 changed files with 98 additions and 106 deletions

View File

@ -91,4 +91,4 @@ export default {
| layui-anim-rotate | 360 度旋转 | `layui-anim layui-anim-rotate` | | layui-anim-rotate | 360 度旋转 | `layui-anim layui-anim-rotate` |
| layui-anim-rotate layui-anim-loop | 循环动画 | `layui-anim layui-anim-rotate layui-anim-loop` | | layui-anim-rotate layui-anim-loop | 循环动画 | `layui-anim layui-anim-rotate layui-anim-loop` |
::: :::

View File

@ -91,4 +91,4 @@ export default {
| size | 尺寸 | `xs` `sm` `lg` | | size | 尺寸 | `xs` `sm` `lg` |
| radius | 圆形 | `true` `false` | | radius | 圆形 | `true` `false` |
::: :::

View File

@ -46,4 +46,4 @@ export default {
| type | 类型 | `dot` `rim` | | type | 类型 | `dot` `rim` |
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` | | theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
::: :::

View File

@ -56,4 +56,4 @@ export default {
| ---- | ----------- | --------------- | | ---- | ----------- | --------------- |
| nm | 灰色样式 | -- | | nm | 灰色样式 | -- |
::: :::

View File

@ -99,4 +99,4 @@ export default {
| ------- | -------- | ------ | | ------- | -------- | ------ |
| default | 默认插槽 | `--` | | default | 默认插槽 | `--` |
::: :::

View File

@ -285,13 +285,13 @@ export default {
::: table ::: table
| 属性 | 描述 | 可选值 | | 属性 | 描述 | 可选值 |
| ------ | ----------- | --------------------------------------------- | | ------ | ------ | --------------------------------------------- |
| type | 主题 | `primary` `normal` `warm` `danger` `disabled` | | type | 主题 | `primary` `normal` `warm` `danger` `disabled` |
| size | 尺寸 | `lg` `sm` `xs` | | size | 尺寸 | `lg` `sm` `xs` |
| fluid | 最大化 | `true` `false` | | fluid | 最大化 | `true` `false` |
| radius | 圆角 | `true` `false` | | radius | 圆角 | `true` `false` |
| border | 边框 | `green` `blue` `orange` `red` `black` | | border | 边框 | `green` `blue` `orange` `red` `black` |
::: :::
@ -300,9 +300,8 @@ export default {
::: table ::: table
| 事件 | 描述 | 参数 | | 事件 | 描述 | 参数 |
| ------ | ----------- | --------------------------------------------- | | ----- | -------- | ---- |
| click | 单击事件 | `--` | | click | 单击事件 | `--` |
::: :::

View File

@ -126,4 +126,4 @@ export default {
| header | 头部插槽 | -- | | header | 头部插槽 | -- |
| body | 内容插槽 | -- | | body | 内容插槽 | -- |
::: :::

View File

@ -138,4 +138,4 @@ export default {
| ------ | -------- | ------ | | ------ | -------- | ------ |
| change | 切换回调 | id | | change | 切换回调 | id |
::: :::

View File

@ -49,4 +49,4 @@ export default {
| id | 编号 | -- | | id | 编号 | -- |
| title | 标题 | -- | | title | 标题 | -- |
::: :::

View File

@ -159,4 +159,4 @@ export default {
| layui-bg-blue | 蓝色 | class="layui-bg-blue" | | layui-bg-blue | 蓝色 | class="layui-bg-blue" |
| layui-bg-black | 雅黑 | class="layui-bg-black" | | layui-bg-black | 雅黑 | class="layui-bg-black" |
::: :::

View File

@ -27,4 +27,4 @@ export default {
| page | 开启分页 | -- | | page | 开启分页 | -- |
| showSearch | 启用搜索 | -- | | showSearch | 启用搜索 | -- |
::: :::

View File

@ -74,4 +74,4 @@ export default {
| ----- | ------ | -------------- | | ----- | ------ | -------------- |
| fluid | 流模式 | `true` `false` | | fluid | 流模式 | `true` `false` |
::: :::

View File

@ -87,4 +87,4 @@ export default {
| ------- | -------- | ------ | | ------- | -------- | ------ |
| content | 下拉内容 | -- | | content | 下拉内容 | -- |
::: :::

View File

@ -53,4 +53,4 @@ export default {
| ----------- | -------- | ------ | | ----------- | -------- | ------ |
| description | 描述信息 | -- | | description | 描述信息 | -- |
::: :::

View File

@ -67,4 +67,4 @@ export default {
| ----- | ----------- | --------------- | | ----- | ----------- | --------------- |
| title | 标题 | -- | | title | 标题 | -- |
::: :::

View File

@ -73,4 +73,4 @@ export default {
| ----- | ----------- | --------------- | | ----- | ----------- | --------------- |
| label | 标题名称 | -- | | label | 标题名称 | -- |
::: :::

View File

@ -163,4 +163,4 @@ export default {
| md-offset | 偏移 - 中等屏幕 (桌面 ≥992px) | 0 - 12 | | md-offset | 偏移 - 中等屏幕 (桌面 ≥992px) | 0 - 12 |
| lg-offset | 偏移 - 大型屏幕 (桌面 ≥1200px) | 0 - 12 | | lg-offset | 偏移 - 大型屏幕 (桌面 ≥1200px) | 0 - 12 |
::: :::

View File

@ -1116,4 +1116,4 @@ export default {
| color | 颜色 | -- | | color | 颜色 | -- |
| size | 尺寸 | -- | | size | 尺寸 | -- |
::: :::

View File

@ -109,4 +109,4 @@ export default {
| page | 开启分页 | -- | | page | 开启分页 | -- |
| showSearch | 启用搜索 | -- | | showSearch | 启用搜索 | -- |
::: :::

View File

@ -128,4 +128,4 @@ export default {
| foucs | 原生 foucs 事件 | event : 事件对象 | | foucs | 原生 foucs 事件 | event : 事件对象 |
| blur | 原生 blur 事件 | -- | | blur | 原生 blur 事件 | -- |
::: :::

View File

@ -239,20 +239,20 @@ export default {
::: table ::: table
| 备注 | 描述 | 默认值 | | 备注 | 描述 | 默认值 |
| --------------- | ------------- | ------- | | --------------- | ------------- | -------------------------- |
| title | 标题 | -- | | title | 标题 | -- |
| move | 允许拖拽 | `false` | | move | 允许拖拽 | `false` |
| maxmin | 最小化 最大化 | `false` | | maxmin | 最小化 最大化 | `false` |
| offset | 位置 | -- | | offset | 位置 | -- |
| width | 宽 | -- | | width | 宽 | -- |
| height | 高 | -- | | height | 高 | -- |
| v-model:visible | 展示 隐藏 | false | | v-model:visible | 展示 隐藏 | false |
| content | 内容 | -- | | content | 内容 | -- |
| shade | 开启遮盖 | -- | | shade | 开启遮盖 | -- |
| shadeClose | 遮盖点击关闭 | -- | | shadeClose | 遮盖点击关闭 | -- |
| zIndex | 自定义层级 | -- | | zIndex | 自定义层级 | -- |
| type | 类型 | `1: component` `2: iframe` | | type | 类型 | `1: component` `2: iframe` |
| closeBtn | 显示关闭 | true | | closeBtn | 显示关闭 | true |
::: :::

View File

@ -183,4 +183,4 @@ export default {
| lay-body | 内容 | -- | | lay-body | 内容 | -- |
| lay-footer | 底部 | -- | | lay-footer | 底部 | -- |
::: :::

View File

@ -40,4 +40,4 @@ export default {
| ----- | ----------- | --------------------------------------------- | | ----- | ----------- | --------------------------------------------- |
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` | | theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
::: :::

View File

@ -82,10 +82,10 @@ export default {
::: table ::: table
| 属性 | 描述 | 备注 | | 属性 | 描述 | 备注 |
| ---------------------| ------ | ---- | | ------------------- | ------ | ---- |
| v-model:selectedKey | 选中项 | -- | | v-model:selectedKey | 选中项 | -- |
| v-model:openKeys | 打开项 | -- | | v-model:openKeys | 打开项 | -- |
::: :::
@ -98,4 +98,4 @@ export default {
| ----- | -------- | ---- | | ----- | -------- | ---- |
| title | 菜单标题 | -- | | title | 菜单标题 | -- |
::: :::

View File

@ -231,4 +231,4 @@ export default {
| prev | 上一页 | 上一页 | | prev | 上一页 | 上一页 |
| next | 下一页 | 下一页 | | next | 下一页 | 下一页 |
::: :::

View File

@ -30,4 +30,4 @@ export default {
| ------- | -------- | ------ | | ------- | -------- | ------ |
| default | 默认插槽 | -- | | default | 默认插槽 | -- |
::: :::

View File

@ -124,4 +124,4 @@ export default {
| color | 颜色 | -- | | color | 颜色 | -- |
| showText | 展示描述 | -- | | showText | 展示描述 | -- |
::: :::

View File

@ -116,4 +116,4 @@ export default {
| ------ | -------- | ---------------- | | ------ | -------- | ---------------- |
| change | 切换事件 | current : 当前值 | | change | 切换事件 | current : 当前值 |
::: :::

View File

@ -145,4 +145,4 @@ export default {
| length | 评分长度 | -- | | length | 评分长度 | -- |
| readonly | 只读模式 | -- | | readonly | 只读模式 | -- |
::: :::

View File

@ -99,4 +99,4 @@ export default {
| ------ | ----------- | --------------- | | ------ | ----------- | --------------- |
| change | 切换事件 | value | | change | 切换事件 | value |
::: :::

View File

@ -132,4 +132,4 @@ export default {
| ------ | -------- | ---------------- | | ------ | -------- | ---------------- |
| change | 切换事件 | current : 当前值 | | change | 切换事件 | current : 当前值 |
::: :::

View File

@ -189,4 +189,4 @@ export default {
| change | 选中切换 | -- | | change | 选中切换 | -- |
| close | 关闭事件 | -- | | close | 关闭事件 | -- |
::: :::

View File

@ -308,4 +308,4 @@ export default {
| ------- | ------------ | ---- | | ------- | ------------ | ---- |
| toolbar | 自定义工具栏 | -- | | toolbar | 自定义工具栏 | -- |
::: :::

View File

@ -107,4 +107,4 @@ export default {
| foucs | 原生 foucs 事件 | event : 事件对象 | | foucs | 原生 foucs 事件 | event : 事件对象 |
| blur | 原生 blur 事件 | -- | | blur | 原生 blur 事件 | -- |
::: :::

View File

@ -82,4 +82,4 @@ export default {
| simple | 简单模式 | -- | | simple | 简单模式 | -- |
| title | 标题 | -- | | title | 标题 | -- |
::: :::

View File

@ -105,4 +105,4 @@ export default {
| ---- | ----------- | --------------- | | ---- | ----------- | --------------- |
| item | 列表项 | { data } | | item | 列表项 | { data } |
::: :::

View File

@ -233,13 +233,13 @@ function handleClick(node) {
::: table ::: table
| Name | Description | Accepted Values | | Name | Description | Accepted Values |
| -------- | ---- | ----------------------- | | -------- | -------------- | --------------- | --- |
| id | 唯一值 | - | | id | 唯一值 | - |
| title | 节点名称 | - | | title | 节点名称 | - |
| children | 子节点 | [] | | children | 子节点 | [] |
| disabled | 该节点是否禁用 | false | | disabled | 该节点是否禁用 | false |
| spread | 该节点是否展开 | false | - | | spread | 该节点是否展开 | false | - |
::: :::
@ -252,4 +252,4 @@ function handleClick(node) {
| ---------- | --------------- | --------------- | | ---------- | --------------- | --------------- |
| node-click | 节点 click 事件 | -- | | node-click | 节点 click 事件 | -- |
::: :::

View File

@ -39,4 +39,4 @@ export default {
| -------------- | --------------- | ---- | | -------------- | --------------- | ---- |
| isClickOutside | 使用 watch 监听 | Ref | | isClickOutside | 使用 watch 监听 | Ref |
::: :::

View File

@ -39,4 +39,4 @@ export default {
| fullScreen | 全屏切换 | Function | | fullScreen | 全屏切换 | Function |
| isFullScreen | 当前状态 | Ref | | isFullScreen | 当前状态 | Ref |
::: :::

View File

@ -34,4 +34,4 @@ export default {
| ---- | -------------- | ----------- | | ---- | -------------- | ----------- |
| el | 需要拖拽的元素 | HtmlElement | | el | 需要拖拽的元素 | HtmlElement |
::: :::

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="lay-code"> <div class="lay-code">
<div class="source" id="source"> <div id="source" class="source">
<slot /> <slot />
</div> </div>
<div ref="meta" class="meta"> <div ref="meta" class="meta">
@ -11,16 +11,9 @@
<slot name="code" /> <slot name="code" />
</div> </div>
</div> </div>
<div <div :class="{ 'is-fixed': isFixContorl }" class="control">
:class="{ 'is-fixed': isFixContorl }" <i class="layui-icon layui-icon-file" @click="copy" />
class="control" <i class="layui-icon layui-icon-fonts-code" @click="toggle" />
>
<i
class="layui-icon layui-icon-file" @click="copy"
/>
<i
class="layui-icon layui-icon-fonts-code" @click="toggle"
/>
</div> </div>
</div> </div>
</template> </template>
@ -39,9 +32,9 @@ const toggle = function () {
} }
const copy = function () { const copy = function () {
var Url2 =document.getElementById("source") as any; var Url2 = document.getElementById('source') as any
Url2.select(); Url2.select()
document.execCommand("Copy"); document.execCommand('Copy')
} }
onMounted(() => { onMounted(() => {

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="lay-table-box"> <div class="lay-table-box">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
<style> <style>
.lay-table-box table { .lay-table-box table {
@ -34,4 +34,4 @@
.lay-table-box table td { .lay-table-box table td {
white-space: nowrap; white-space: nowrap;
} }
</style> </style>

View File

@ -25,7 +25,7 @@ const plugins = [
md.use(snippet) md.use(snippet)
.use(preWrapper) .use(preWrapper)
.use(container, 'demo', demo) .use(container, 'demo', demo)
.use(...createTable('table','')) .use(...createTable('table', ''))
.use(...createBlock('block', '')) .use(...createBlock('block', ''))
.use(...createTitle('title', '')) .use(...createTitle('title', ''))
.use(...createDescribe('describe', '')) .use(...createDescribe('describe', ''))

View File

@ -1,4 +1,4 @@
@import './code.css'; @import './code.css';
@import './custom-blocks.css'; @import './custom-blocks.css';
@import './markdown.css'; @import './markdown.css';
@import './vars.css'; @import './vars.css';

View File

@ -14,15 +14,15 @@
<i class="layui-icon layui-icon-cols"></i> <i class="layui-icon layui-icon-cols"></i>
</div> </div>
<template #content> <template #content>
<div style="padding:10px"> <div style="padding: 10px">
<table-item-checkbox <table-item-checkbox
skin="primary" v-for="column in columns"
v-for="column in columns" :key="column"
v-model="tableColumns" v-model="tableColumns"
:label="column" skin="primary"
:key="column" :label="column"
>{{ column.title }}</table-item-checkbox >{{ column.title }}</table-item-checkbox
> >
</div> </div>
</template> </template>
</lay-dropdown> </lay-dropdown>
@ -98,8 +98,8 @@
</template> </template>
<template <template
v-else
v-for="(value, key) in data" v-for="(value, key) in data"
v-else
:key="value" :key="value"
> >
<td v-if="column.key == key" class="layui-table-cell"> <td v-if="column.key == key" class="layui-table-cell">
@ -154,7 +154,7 @@ import {
useSlots, useSlots,
watch, watch,
withDefaults, withDefaults,
defineEmits defineEmits,
} from 'vue' } from 'vue'
import { Recordable } from '/@src/module/type' import { Recordable } from '/@src/module/type'