Browse Source

refactor: share renderCellContent between el-table-v2 and mini table

- Extract cell rendering logic into shared renderCellContent function
- Both real table's cellRenderer and mini table now use the same function
- Eliminates code duplication and ensures consistent rendering
- Update DEV_MODE_TS timestamp

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
dev
hechang27-sprt 3 months ago
parent
commit
ed00f0bab2
  1. 45
      packages/base/data/list-table-v2.vue
  2. 2
      packages/manage/router/index.vue

45
packages/base/data/list-table-v2.vue

@ -11,7 +11,7 @@ @@ -11,7 +11,7 @@
class="mini-cell"
:style="getMiniCellStyle(item)"
>
<MiniCellRenderer :item="item" :row="row" :slots="slots" />
{renderCellContent(item, lodash.get(row, item.dataKey || item.key), row, slots)}
</div>
</div>
</div>
@ -412,50 +412,15 @@ const tableColumns = computed(() => { @@ -412,50 +412,15 @@ const tableColumns = computed(() => {
// Cell renderer - el-table-v2 uses cellRenderer function
col.cellRenderer = ({ cellData, rowData }: { cellData: any; rowData: any }) => {
const slotName = item.key;
// If column has slot=true, render the parent's slot content
if (item.slot && slots[slotName]) {
return renderSlot(slots, slotName, { row: rowData });
}
const value = lodash.get(rowData, item.dataKey || item.key);
// Handle timestamp display using TzDateTime component
if (item.timestamp) {
const tzProps = resolveTimestampProps(item.timestamp);
if (tzProps) {
const { valueFormat, valueTz, displayFormat, locale, type } = tzProps;
return (
<TzDateTime
value={value}
valueFormat={valueFormat}
valueTz={valueTz}
displayFormat={displayFormat}
locale={locale}
type={type}
/>
);
}
}
// Handle dict display
if (item.dict) {
return <span>{formatterByDist(item.dict, value)}</span>;
}
// Handle formatting
const formatted = formatCellValue(value, item, rowData);
return <span>{formatted}</span>;
return renderCellContent(item, cellData, rowData, slots);
};
return col;
});
});
// Mini cell renderer - mirrors the real table's cellRenderer for faithful height estimation
const MiniCellRenderer = (props: { item: TableColumn; row: any; slots: ReturnType<typeof useSlots> }) => {
const { item, row, slots } = props;
// Shared cell renderer - used by both el-table-v2 and mini table for consistent rendering
const renderCellContent = (item: TableColumn, value: any, row: any, slots: ReturnType<typeof useSlots>) => {
const slotName = item.key;
// If column has slot=true, render the parent's slot content
@ -463,8 +428,6 @@ const MiniCellRenderer = (props: { item: TableColumn; row: any; slots: ReturnTyp @@ -463,8 +428,6 @@ const MiniCellRenderer = (props: { item: TableColumn; row: any; slots: ReturnTyp
return renderSlot(slots, slotName, { row });
}
const value = lodash.get(row, item.dataKey || item.key);
// Handle timestamp display using TzDateTime component
if (item.timestamp) {
const tzProps = resolveTimestampProps(item.timestamp);

2
packages/manage/router/index.vue

@ -37,7 +37,7 @@ import { useRouter, useRoute } from "vue-router"; @@ -37,7 +37,7 @@ import { useRouter, useRoute } from "vue-router";
import { Api, NoobHead } from "noob-mengyxu";
import md5 from "js-md5";
const DEV_MODE_TS = "2026-03-26T08:00:00.000Z";
const DEV_MODE_TS = "2026-03-26T08:02:00.000Z";
const { VITE_APP_VERSION, VITE_GIT_HASH, NODE_ENV } = import.meta.env;
const { Head, MenuTree, HeadPersonal, Fullscreen, StyleChange, LangChange, SizeChange } = NoobHead;

Loading…
Cancel
Save