项目初始化

This commit is contained in:
2026-03-23 10:09:41 +08:00
parent 8815ede10b
commit 1c8bdb6ce0
3 changed files with 77 additions and 56 deletions

View File

@@ -21,76 +21,82 @@
const { columns, actionColumn, dataSource } = props;
const columnList = [...columns, actionColumn];
return (
<table class="file-table" ref={tableRef}>
<colgroup>
{columnList.map((item) => {
const { width = 0, dataIndex } = item;
const style: CSSProperties = {
width: `${width}px`,
minWidth: `${width}px`,
};
return <col style={width ? style : {}} key={dataIndex} />;
})}
</colgroup>
<thead>
<tr class="file-table-tr">
<div class="file-table-wrap" ref={tableRef}>
<table class="file-table">
<colgroup>
{columnList.map((item) => {
const { title = '', align = 'center', dataIndex } = item;
const { width = 0, dataIndex } = item;
const style: CSSProperties = {
width: `${width}px`,
minWidth: `${width}px`,
};
return <col style={width ? style : {}} key={dataIndex} />;
})}
</colgroup>
<thead>
<tr class="file-table-tr">
{columnList.map((item) => {
const { title = '', align = 'center', dataIndex } = item;
return (
dataIndex && (
<th class={['file-table-th', align]} key={dataIndex}>
{title}
</th>
)
);
})}
</tr>
</thead>
<tbody>
{dataSource.map((record = {}, index) => {
return (
dataIndex && (
<th class={['file-table-th', align]} key={dataIndex}>
{title}
</th>
)
<tr class="file-table-tr" key={`${index + record.name || ''}`}>
{columnList.map((item) => {
const { dataIndex = '', customRender, align = 'center' } = item;
const render = customRender && isFunction(customRender);
return (
dataIndex && (
<td class={['file-table-td', align]} key={dataIndex}>
{render
? customRender?.({ text: get(record, dataIndex), record, index })
: get(record, dataIndex)}
</td>
)
);
})}
</tr>
);
})}
</tr>
</thead>
<tbody>
{dataSource.map((record = {}, index) => {
return (
<tr class="file-table-tr" key={`${index + record.name || ''}`}>
{columnList.map((item) => {
const { dataIndex = '', customRender, align = 'center' } = item;
const render = customRender && isFunction(customRender);
return (
dataIndex && (
<td class={['file-table-td', align]} key={dataIndex}>
{render
? customRender?.({ text: get(record, dataIndex), record, index })
: get(record, dataIndex)}
</td>
)
);
})}
{dataSource.length == 0 && (
<tr class="file-table-tr">
<td class="file-table-td center" colspan={columnList.length}>
{props.emptyText}
</td>
</tr>
);
})}
{dataSource.length == 0 && (
<tr class="file-table-tr">
<td class="file-table-td center" colspan={columnList.length}>
{props.emptyText}
</td>
</tr>
)}
</tbody>
</table>
)}
</tbody>
</table>
</div>
);
};
},
});
</script>
<style lang="less">
.file-table-wrap {
max-height: 360px;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid @border-color-base;
border-radius: 8px;
}
.file-table {
width: 100%;
border-top: 1px solid @border-color-base;
border-right: 1px solid @border-color-base;
border-collapse: separate;
border-spacing: 0;
border-collapse: collapse;
&-th,
&-td {
border-left: 1px solid @border-color-base;
border-bottom: 1px solid @border-color-base;
padding: 12px 8px;
overflow-wrap: break-word;
@@ -101,6 +107,21 @@
thead {
background-color: @background-color-light;
.file-table-th {
position: sticky;
top: 0;
z-index: 1;
background-color: @background-color-light;
}
}
tbody {
.file-table-tr:last-child {
.file-table-td {
border-bottom: 0;
}
}
}
.center {

View File

@@ -1,6 +1,6 @@
<template>
<BasicModal
width="80%"
width="60%"
:title="t('component.upload.upload')"
:okText="t('component.upload.save')"
v-bind="$attrs"

View File

@@ -1,7 +1,7 @@
<template>
<BasicModal
v-if="!props.showPreviewList"
width="80%"
width="60%"
:title="t('component.upload.view')"
:cancelText="t('component.modal.okText')"
wrapClassName="upload-preview-modal"