Skip to content

Commit f37762e

Browse files
jevin98sleeprite
jevin98
authored and
sleeprite
committed
!469 refactor(table): 重构table
* chore: add test #IBBTTA * chore: 优化page.change提示场景 * chore: update * feat: add column.ellipsisTooltipProps * feat: add slots.page * feat: add props.page.change and warn emit change * chore: fix some issue * chore: optimization tableMain props * feat: extend default-toolbar * feat: add emit checkbox/checkbox-all * wip: 存在column.children 不可拖动改变宽度 * wip: dataSource and fix dts * test: add tests * wip: resolve I8J9H9 * wip: code structure refactor completed * Merge branch '2.x' of https://gitee.com/layui-vue/layui-vue into jevin… * chore: update * Merge branch '2.x' into jevin/refactor-table * wip: extract toolbar component and code * chore: update * refactor: minor rewrite fixed
1 parent c1325ba commit f37762e

37 files changed

+2950
-2405
lines changed

‎docs/src/document/zh-CN/components/table.md

Lines changed: 100 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ const getSelectedKeys3 = () => {
238238
}
239239

240240
const getCheckData3 = () => {
241-
layer.msg(tableRef3.value.getCheckData());
241+
layer.msg(JSON.stringify(tableRef3.value.getCheckData()));
242242
}
243243

244244
const columns3 = [
@@ -414,7 +414,13 @@ const columns5 = [
414414
children: [
415415
{ title: "省", key: "prov", width: "100px" },
416416
{ title: "市", key: "city", width: "100px" },
417-
{ title: "区", key: "area", width: "100px" },
417+
{ title: "区", key: "area", width: "100px",
418+
children: [
419+
{ title: "区1", key: "area1", width: "100px" },
420+
{ title: "区2", key: "area2", width: "100px" },
421+
{ title: "区3", key: "area3", width: "100px" },
422+
]
423+
},
418424
]
419425
},
420426
{
@@ -425,14 +431,14 @@ const columns5 = [
425431
]
426432

427433
const dataSource5 = [
428-
{id:"10001", name:"夏娜1", prov:"浙江", sex:"女", city:"杭州", area: "西湖区", remark: '不知江月待何人，但见长江送流水。'},
429-
{id:"10002", name:"夏娜2", prov:"浙江", sex:"女", city:"杭州", area: "西湖区", remark: '不知江月待何人，但见长江送流水。'},
430-
{id:"10003", name:"夏娜3", prov:"浙江", sex:"女", city:"杭州", area: "西湖区", remark: '不知江月待何人，但见长江送流水。'},
431-
{id:"10004", name:"夏娜4", prov:"浙江", sex:"女", city:"杭州", area: "西湖区", remark: '不知江月待何人，但见长江送流水。'},
432-
{id:"10005", name:"夏娜5", prov:"浙江", sex:"女", city:"杭州", area: "西湖区", remark: '不知江月待何人，但见长江送流水。'},
433-
{id:"10006", name:"夏娜6", prov:"浙江", sex:"女", city:"杭州", area: "西湖区", remark: '不知江月待何人，但见长江送流水。'},
434-
{id:"10007", name:"夏娜7", prov:"浙江", sex:"女", city:"杭州", area: "西湖区", remark: '不知江月待何人，但见长江送流水。'},
435-
{id:"10008", name:"夏娜8", prov:"浙江", sex:"女", city:"杭州", area: "西湖区", remark: '不知江月待何人，但见长江送流水。'}
434+
{id:"10001", name:"夏娜1", area1: '区1', area2: "区2", area3: "区3", prov:"浙江", sex:"女", city:"杭州", area: "西湖区", remark: '不知江月待何人，但见长江送流水。'},
435+
{id:"10002", name:"夏娜2", area1: '区1', area2: "区2", area3: "区3", prov:"浙江", sex:"女", city:"杭州", area: "西湖区", remark: '不知江月待何人，但见长江送流水。'},
436+
{id:"10003", name:"夏娜3", area1: '区1', area2: "区2", area3: "区3", prov:"浙江", sex:"女", city:"杭州", area: "西湖区", remark: '不知江月待何人，但见长江送流水。'},
437+
{id:"10004", name:"夏娜4", area1: '区1', area2: "区2", area3: "区3", prov:"浙江", sex:"女", city:"杭州", area: "西湖区", remark: '不知江月待何人，但见长江送流水。'},
438+
{id:"10005", name:"夏娜5", area1: '区1', area2: "区2", area3: "区3", prov:"浙江", sex:"女", city:"杭州", area: "西湖区", remark: '不知江月待何人，但见长江送流水。'},
439+
{id:"10006", name:"夏娜6", area1: '区1', area2: "区2", area3: "区3", prov:"浙江", sex:"女", city:"杭州", area: "西湖区", remark: '不知江月待何人，但见长江送流水。'},
440+
{id:"10007", name:"夏娜7", area1: '区1', area2: "区2", area3: "区3", prov:"浙江", sex:"女", city:"杭州", area: "西湖区", remark: '不知江月待何人，但见长江送流水。'},
441+
{id:"10008", name:"夏娜8", area1: '区1', area2: "区2", area3: "区3", prov:"浙江", sex:"女", city:"杭州", area: "西湖区", remark: '不知江月待何人，但见长江送流水。'},
436442
]
437443

438444
</script>
@@ -568,7 +574,7 @@ const dataSource6 = [
568574
]
569575

570576
const getCheckData6 = function() {
571-
layer.msg(tableRef6.value.getCheckData());
577+
layer.msg(JSON.stringify(tableRef6.value.getCheckData()));
572578
}
573579

574580
const defaultExpandAll6 = ref(false);
@@ -827,6 +833,47 @@ const defaultExpandAll2 = ref(false)
827833

828834
:::
829835

836+
::: title 添加工具栏图标
837+
:::
838+
839+
::: demo 通过 `default-toolbar` 新增其他配置。
840+
841+
<template>
842+
<lay-table :columns="columns11" :data-source="dataSource11" :default-toolbar="defaultToolbars">
843+
</lay-table>
844+
</template>
845+
846+
<script setup>
847+
import { ref } from 'vue'
848+
849+
const columns11 = [
850+
{ title:"编号", width:"80px", key:"id", fixed: "left", sort: "desc"},
851+
{ title:"姓名", width:"80px", key:"name" },
852+
]
853+
854+
const dataSource11 = [
855+
{id:"1", name:"张三1"},
856+
{id:"2", name:"张三2"},
857+
]
858+
859+
const defaultToolbars = [
860+
"filter",
861+
{
862+
icon: "layui-icon-refresh",
863+
title: "刷新",
864+
onClick: () => {
865+
console.log("导出")
866+
}
867+
},
868+
"export",
869+
"print"
870+
]
871+
872+
873+
</script>
874+
875+
:::
876+
830877
::: title Table 属性
831878
:::
832879

@@ -839,8 +886,8 @@ const defaultExpandAll2 = ref(false)
839886
| id | 数据主键 | `string` | -- | -- |
840887
| v-model:selectedKeys | 复选框选中项 | -- | -- | -- |
841888
| v-model:selectedKey | 单选框选中项 | -- | -- | -- |
842-
| default-toolbar | 工具栏 | `boolean` `array` | `false` | `true` `false` `['filter','export','print']` |
843-
| page | 分页配置，同分页组件参数一致 [详情](https://www.layui-vue.com/zh-CN/components/page) | `object` | -- |-- |
889+
| default-toolbar | 工具栏 | `boolean` `Array<TableDefaultToolbar>` | `false` | [TableDefaultToolbar](https://www.layui-vue.com/zh-CN/components/table#Types) `2.22.0` |
890+
| page | 分页配置 `2.22.0`新增`page.change` | [TablePageProps](https://www.layui-vue.com/zh-CN/components/table#Types) | -- |-- |
844891
| size | 表格大小 | `string` | `md` | `lg` `md` `sm` |
845892
| children-column-name | 指定树形结构的列名 | `string` | `children` | -- |
846893
| indent-size | 指定树形结构的缩进距离 | `number` | `30` | -- |
@@ -878,9 +925,11 @@ const defaultExpandAll2 = ref(false)
878925
| row-double | 行双击 | { row: 当前行数据 } |
879926
| row-contextmenu | 行右击 | { row: 当前行数据 } |
880927
| cell-double | 单元格双击 | data:当前单元格信息, event |
881-
| change | 分页事件 | { current: 当前页码, limit: 每页数量 } |
928+
| change | 分页事件。<span style="color: red;">将在未来版本废弃，请替换为`page.change`</span> | { current: 当前页码, limit: 每页数量 } |
882929
| sort-change | 排序事件 | sort: string |
883-
| expand-change `2.18.0` | 行展开/收起 | data:当前单元格信息, event |
930+
| expand-change `2.18.0` | 行展开/收起 | data:当前单元格信息, event |
931+
| checkbox `2.22.0` | 单行 checkbox 事件 | state: 是否选中, data: 点击行数据源 |
932+
| checkbox-all `2.22.0` | 全选 checkbox 事件 | selectedKeys: 选中数据 |
884933
885934
:::
886935
@@ -896,6 +945,7 @@ const defaultExpandAll2 = ref(false)
896945
| expand | 嵌套面板 | { row } 在 1.8.6 版本，data 参数由 row 替代，但 data 仍然可用 | `1.4.4` |
897946
| customSlot | 自定义列插槽 | { row，rowIndex，column，columnIndex } 在 1.8.6 版本，data 参数由 row 替代，但 data 仍然可用，新增 rowIndex 行索引 columnIndex 列索引 column 列信息参数 | `1.4.4` |
898947
| empty | 无数据时显示的 UI | 此插槽意在替换整个无数据时的显示 UI，如果只是单纯替换文字，保留无数据时的图像，请使用`table`的`emptyDescription`属性 | `2.11.6` |
948+
| page | 分页组件右侧区域 | -- | `2.22.0` |
899949
900950
:::
901951
@@ -928,7 +978,8 @@ const defaultExpandAll2 = ref(false)
928978
| titleSlot | 标题插槽 | 插槽参数 {column, columnIndex} | -- | -- | -- |
929979
| align | 对齐方式 | `string` | `left` | `left` `right` `center` | -- |
930980
| ellipsisTooltip | 当内容过长被隐藏时显示 tooltip | `boolean` | `false` | `true` `false` | -- |
931-
| ellipsisTooltipTheme | tooltip 主题 | `string` | `light` | `dark` `light` | -- |
981+
| ellipsisTooltipTheme | tooltip 主题 !!!建议替换为 `ellipsisTooltipProps.isDark` 属性，将在未来版本删除 | `string` | `light` | `dark` `light` | -- |
982+
| ellipsisTooltipProps `2.22.0` | tooltip props | [TooltipProps](https://www.layui-vue.com/zh-CN/components/tooltip#Tooltip%20%E5%B1%9E%E6%80%A7) | -- | -- | -- |
932983
| fixed | 列固定 | `string` | -- | `left` `right` | -- |
933984
| type | 列类型 | `string` | -- | `number` `checkbox` `radio` | -- |
934985
| children | 表头分组 | `string` | -- | `number` `checkbox` `radio` | `1.4.0` |
@@ -940,5 +991,38 @@ const defaultExpandAll2 = ref(false)
940991

941992
:::
942993

994+
::: title Types
995+
996+
```ts
997+
998+
interface TablePageProps = {
999+
current: number;
1000+
limit: number;
1001+
total: number;
1002+
limit?: number;
1003+
theme?: string;
1004+
pages?: number;
1005+
limits?: number[];
1006+
hideOnSinglePage?: boolean;
1007+
ellipsisTooltip?: boolean;
1008+
disabled?: boolean;
1009+
layout?: LayoutKey[];
1010+
change?: (pageData: { current: number; limit: number }) => void;
1011+
}
1012+
1013+
type TableDefaultToolbar =
1014+
| "filter"
1015+
| "export"
1016+
| "print"
1017+
| TableDefaultToolbarComplex;
1018+
1019+
interface TableDefaultToolbarComplex {
1020+
title: string;
1021+
icon: string;
1022+
onClick?: () => void;
1023+
}
1024+
1025+
```
1026+
9431027
::: previousNext table
9441028
:::

‎packages/component/component/_components/render.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ type RenderFunc = (props: Record<string, unknown>) => VNodeTypes;
66

77
export default defineComponent({
88
name: "LayRender",
9+
inheritAttrs: false,
910
props: {
1011
render: {
1112
type: [String, Function] as PropType<string | RenderFunc>,

‎packages/component/component/checkbox/index.less

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,11 @@
252252
color: #fff !important;
253253
}
254254

255+
.layui-checkbox-indeterminate .layui-icon-subtraction {
256+
background-color: var(--global-checked-color) !important;
257+
}
258+
255259
.layui-checkbox-disabled .layui-icon-ok,.layui-checkbox-disabled .layui-icon-subtraction{
256260
background-color: var(--global-neutral-color-3) !important;
257261
border-color: var(--global-neutral-color-3) !important;
258-
}
262+
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy