项目初始化
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
width="80%"
|
||||
width="60%"
|
||||
:title="t('component.upload.upload')"
|
||||
:okText="t('component.upload.save')"
|
||||
v-bind="$attrs"
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user