(table): 新增 type 为 number 序号列

This commit is contained in:
就眠儀式
2022-07-18 14:06:56 +08:00
parent bcfed019af
commit a8b025c12a
5 changed files with 86 additions and 15 deletions

View File

@@ -191,6 +191,59 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
<template v-for="(column, columnIndex) in columns" :key="columnIndex">
<!-- 展示否 -->
<template v-if="tableColumnKeys.includes(column.key)">
<template v-if="column.type == 'number'">
<td
class="layui-table-cell"
:style="[
{
textAlign: column.align,
whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
},
renderFixedStyle(column, columnIndex),
renderCellStyle(data, column, index, columnIndex),
]"
:class="[
renderCellClassName(data, column, index, columnIndex),
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
]"
>
<!-- 树表占位与缩进 -->
<span
v-if="expandSpace && columnIndex === 0"
:style="{ 'margin-right': currentIndentSize + 'px' }"
></span>
<span
v-if="
expandSpace &&
!data[childrenColumnName] &&
!slot.expand &&
columnIndex === 0
"
class="layui-table-cell-expand-icon-spaced"
></span>
<lay-icon
v-if="
(slot.expand || data[childrenColumnName]) && columnIndex === 0
"
class="layui-table-cell-expand-icon"
:type="expandIconType"
@click="handleExpand"
></lay-icon>
<lay-tooltip
v-if="column.ellipsisTooltip"
:content="data[column.key]"
:isAutoShow="true"
>
{{ index + 1 }}
</lay-tooltip>
{{ index + 1 }}
</td>
</template>
<!-- 插槽列 -->
<template v-if="column.customSlot">
<td

View File

@@ -72,7 +72,7 @@ const tableSelectedKeys = ref<Recordable[]>([...props.selectedKeys]);
const tableColumns = ref([...props.columns]);
const tableColumnKeys = ref(
props.columns.map((item: any) => {
if(item.hide != true) {
if (item.hide != true) {
return item.key;
}
})
@@ -358,7 +358,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
minWidth: column.minWidth ? column.minWidth : '100px',
}"
/>
</template>
</template>
</template>
<col v-if="scrollWidthCell > 0" :width="scrollWidthCell" />
</colgroup>
@@ -492,12 +492,12 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
</div>
<div v-if="page" class="layui-table-page">
<lay-page
show-page
show-skip
show-limit
:total="page.total"
:limit="page.limit"
v-model="page.current"
show-page
show-limit
show-skip
@jump="change"
>
<template #prev>