u
This commit is contained in:
oneao committed
1 parent
f3936cec61
commit
15e0ae5b67
115 files changed
+11399
-2741
No files matched your search
@@ -208,10 +208,21 @@ const App = {
|
||||
validate: (v: unknown) => Number(v) > 0 || '金额必须大于 0',
|
||||
},
|
||||
},
|
||||
{ dataIndex: 'status', title: '状态', width: 110, editor: { type: 'select', options: [
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '停用', value: 0 },
|
||||
] } },
|
||||
{
|
||||
dataIndex: 'status',
|
||||
title: '状态',
|
||||
width: 110,
|
||||
editor: {
|
||||
type: 'select',
|
||||
options: [
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '停用', value: 0 },
|
||||
],
|
||||
// 按行禁用：enabled=0 的那一行状态不许改 —— 用来锁「动态灰底」这条视觉
|
||||
// （e2e 断言第 2 行灰、第 1 行不灰，且都**不需要先进入编辑行**）
|
||||
disabled: (row: { enabled?: number }) => row.enabled === 0,
|
||||
},
|
||||
},
|
||||
{ dataIndex: 'enabled', title: '启用', width: 80, editor: { type: 'checkbox' } },
|
||||
{
|
||||
dataIndex: 'remark',
|
||||
@@ -235,10 +246,12 @@ const App = {
|
||||
const tableSelectedKeys = ref([])
|
||||
|
||||
// 大数据量：用于验证虚拟滚动真的开启
|
||||
// 后两列带 editor：「编辑行被虚拟滚动滚出窗口 → 编辑器卸载 → 焦点掉到 body」这条
|
||||
// 路径只能在这种「行数多到会虚拟化」的表上复现（见 e2e/table.spec.ts 的键盘跳格用例）
|
||||
const bigTableColumns = [
|
||||
{ dataIndex: 'id', title: 'ID', width: 80 },
|
||||
{ dataIndex: 'name', title: '名称', width: 200 },
|
||||
{ dataIndex: 'value', title: '数值', width: 140, align: 'right' },
|
||||
{ dataIndex: 'name', title: '名称', width: 200, editor: { type: 'text' } },
|
||||
{ dataIndex: 'value', title: '数值', width: 140, align: 'right', editor: { type: 'number' } },
|
||||
]
|
||||
const bigTableData = Array.from({ length: 5000 }, (_, i) => ({
|
||||
id: i + 1,
|
||||
@@ -246,6 +259,71 @@ const App = {
|
||||
value: (i + 1) * 7,
|
||||
}))
|
||||
|
||||
/**
|
||||
* 纯展示表（列上**都没有** `editor`）—— 「不可改灰底」门控的宿主。
|
||||
*
|
||||
* 灰底的语义是「这一格现在改不了」，只有**旁边存在可改的格子**时才是信息。
|
||||
* 这类表若逐格铺灰，整张表看上去就是「禁用状态」（文档里 6/7 张 demo 正是纯展示表）。
|
||||
* 判据在 G3Table 的 editableColumnsExist / shouldMarkReadonly，见那边注释。
|
||||
*/
|
||||
const plainColumns = [
|
||||
{ dataIndex: 'code', title: '编号', width: 120 },
|
||||
{ dataIndex: 'name', title: '名称', width: 200 },
|
||||
{ dataIndex: 'remark', title: '备注', width: 200 },
|
||||
]
|
||||
const plainData = ref([
|
||||
{ code: 'A-001', name: '纯展示行', remark: '这一列也不可编辑' },
|
||||
{ code: 'A-002', name: '纯展示行 2', remark: '这一列也不可编辑' },
|
||||
])
|
||||
|
||||
/* ---- Table：固定列 + 校验态（几何回归用例的宿主）---- */
|
||||
/**
|
||||
* 为什么单独造一份数据：
|
||||
* 「校验未通过的格子刚好在固定列上」这个组合出过一次**只有真浏览器才量得出**的
|
||||
* 位移 —— 校验态样式给 td 的 `position: relative` 覆盖了库的固定列定位，
|
||||
* 内联的 `left: 200px` 于是从「sticky 吸附偏移」变成普通相对位移，
|
||||
* 整格被推开「前面所有左固定列宽度之和」。happy-dom 没有布局引擎，锁不住这类问题。
|
||||
*
|
||||
* 两个刻意之处：
|
||||
* · 第 2 行名称为空 → 固定列上必然出现一个 error 格；
|
||||
* · 列宽总和（1680px）超过视口宽度 → 必须横向滚动，固定列才有「固定」可言。
|
||||
*/
|
||||
const fixedTableColumns = [
|
||||
{ dataIndex: 'code', title: '编号（左固定）', width: 200, fixed: 'left' },
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: '名称（校验列）',
|
||||
width: 200,
|
||||
fixed: 'left',
|
||||
editor: {
|
||||
type: 'text',
|
||||
validate: (v: unknown) => String(v ?? '').length > 0 || '名称不能为空',
|
||||
},
|
||||
},
|
||||
// 填充列：把总宽顶出视口，否则固定列与普通列长得一模一样
|
||||
...Array.from({ length: 6 }, (_, i) => ({
|
||||
dataIndex: `extra${i}`,
|
||||
title: `填充列 ${i + 1}`,
|
||||
width: 180,
|
||||
})),
|
||||
{ dataIndex: 'remark', title: '备注（右固定）', width: 200, fixed: 'right' },
|
||||
]
|
||||
const fixedRowFillers = (row: number) =>
|
||||
Object.fromEntries(Array.from({ length: 6 }, (_, k) => [`extra${k}`, `填充值 ${k + 1}-${row}`]))
|
||||
const fixedTableData = [
|
||||
{ id: 1, code: 'A-001', name: '正常行', remark: '已归档', ...fixedRowFillers(1) },
|
||||
// 空名称 → 这一格必然处于 error 态
|
||||
{ id: 2, code: 'A-002', name: '', remark: '待复核', ...fixedRowFillers(2) },
|
||||
]
|
||||
/**
|
||||
* 当前行按 fms 那套写法交给调用方管（`:active-row-key` + `@row-click`）。
|
||||
*
|
||||
* 这张表专门用来锁「受控调用方点格进入编辑 → 当前行也要高亮」——
|
||||
* 曾经因为浏览器在「单元格 DOM 被替换」时不派发 click，`row-click` 永不触发，
|
||||
* 调用方这个唯一写入者收不到消息，整行不高亮（见 G3Table 的 handleAreaSelectionChange）。
|
||||
*/
|
||||
const fixedActiveKey = ref<string | null>(null)
|
||||
|
||||
return {
|
||||
rtl,
|
||||
toggleRtl,
|
||||
@@ -254,6 +332,11 @@ const App = {
|
||||
tableSelectedKeys,
|
||||
bigTableColumns,
|
||||
bigTableData,
|
||||
plainColumns,
|
||||
plainData,
|
||||
fixedTableColumns,
|
||||
fixedTableData,
|
||||
fixedActiveKey,
|
||||
model,
|
||||
tab,
|
||||
seg,
|
||||
@@ -559,7 +642,9 @@ const App = {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 大数据量（5000 行）：纵向虚拟滚动应当开启；容器限高以产生滚动 -->
|
||||
<!-- 大数据量（5000 行）：纵向虚拟滚动应当开启；容器限高以产生滚动。
|
||||
顺带开斑马纹：纵向虚拟时库改取 nth-child(odd)（DOM 首行≈偶数数据行），
|
||||
冻结列的条纹叠色必须跟着同一套 nth-child 走（见 _overrides.scss 的 stripe 段）。 -->
|
||||
<div data-testid="table-big-wrap" style="height: 360px; margin-top: 16px">
|
||||
<G3Table
|
||||
data-testid="table-big"
|
||||
@@ -567,6 +652,7 @@ const App = {
|
||||
:data-source="bigTableData"
|
||||
:seq="false"
|
||||
:row-height="30"
|
||||
stripe
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -579,6 +665,39 @@ const App = {
|
||||
:seq="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 固定列 + 校验态 + 受控当前行：几何与「点格进编辑要高亮」的回归宿主 -->
|
||||
<div data-testid="table-fixed-wrap" style="height: 240px; margin-top: 16px">
|
||||
<G3Table
|
||||
data-testid="table-fixed"
|
||||
:columns="fixedTableColumns"
|
||||
:data-source="fixedTableData"
|
||||
:active-row-key="fixedActiveKey"
|
||||
fixed-col-shadow
|
||||
@row-click="(_, row) => (fixedActiveKey = String(row.id))"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 纯展示表（列上都没有 editor）：不该铺「不可改」灰底 -->
|
||||
<div data-testid="table-plain-wrap" style="height: 200px; margin-top: 16px">
|
||||
<G3Table data-testid="table-plain" :columns="plainColumns" :data-source="plainData" />
|
||||
</div>
|
||||
|
||||
<!-- 关闭编辑（editable: false），但列上声明了 editor：同样不该铺灰底 -->
|
||||
<div data-testid="table-noedit-wrap" style="height: 200px; margin-top: 16px">
|
||||
<G3Table
|
||||
data-testid="table-noedit"
|
||||
:columns="tableColumns"
|
||||
:data-source="tableData"
|
||||
:editable="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 斑马纹（stripe）：固定列（序号列）也要跟着上条纹。
|
||||
用纯展示列（没有 editor）当宿主，避免「不可改灰底」盖住条纹干扰断言。 -->
|
||||
<div data-testid="table-stripe-wrap" style="height: 200px; margin-top: 16px">
|
||||
<G3Table data-testid="table-stripe" :columns="plainColumns" :data-source="plainData" stripe />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
`,
|
||||
|
||||
Reference in new issue
Block a user