✨(table): 新增 type 为 number 序号列
This commit is contained in:
parent
bcfed019af
commit
a8b025c12a
@ -191,6 +191,59 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
|
|||||||
<template v-for="(column, columnIndex) in columns" :key="columnIndex">
|
<template v-for="(column, columnIndex) in columns" :key="columnIndex">
|
||||||
<!-- 展示否 -->
|
<!-- 展示否 -->
|
||||||
<template v-if="tableColumnKeys.includes(column.key)">
|
<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">
|
<template v-if="column.customSlot">
|
||||||
<td
|
<td
|
||||||
|
@ -72,7 +72,7 @@ const tableSelectedKeys = ref<Recordable[]>([...props.selectedKeys]);
|
|||||||
const tableColumns = ref([...props.columns]);
|
const tableColumns = ref([...props.columns]);
|
||||||
const tableColumnKeys = ref(
|
const tableColumnKeys = ref(
|
||||||
props.columns.map((item: any) => {
|
props.columns.map((item: any) => {
|
||||||
if(item.hide != true) {
|
if (item.hide != true) {
|
||||||
return item.key;
|
return item.key;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -358,7 +358,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
|
|||||||
minWidth: column.minWidth ? column.minWidth : '100px',
|
minWidth: column.minWidth ? column.minWidth : '100px',
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<col v-if="scrollWidthCell > 0" :width="scrollWidthCell" />
|
<col v-if="scrollWidthCell > 0" :width="scrollWidthCell" />
|
||||||
</colgroup>
|
</colgroup>
|
||||||
@ -492,12 +492,12 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
|
|||||||
</div>
|
</div>
|
||||||
<div v-if="page" class="layui-table-page">
|
<div v-if="page" class="layui-table-page">
|
||||||
<lay-page
|
<lay-page
|
||||||
|
show-page
|
||||||
|
show-skip
|
||||||
|
show-limit
|
||||||
:total="page.total"
|
:total="page.total"
|
||||||
:limit="page.limit"
|
:limit="page.limit"
|
||||||
v-model="page.current"
|
v-model="page.current"
|
||||||
show-page
|
|
||||||
show-limit
|
|
||||||
show-skip
|
|
||||||
@jump="change"
|
@jump="change"
|
||||||
>
|
>
|
||||||
<template #prev>
|
<template #prev>
|
||||||
|
@ -714,6 +714,12 @@ export default {
|
|||||||
const defaultToolbar5 = ref(true)
|
const defaultToolbar5 = ref(true)
|
||||||
|
|
||||||
const columns5 = [
|
const columns5 = [
|
||||||
|
{
|
||||||
|
title: "序号",
|
||||||
|
fixed: "left",
|
||||||
|
type: "number",
|
||||||
|
width: "30px",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title:"姓名",
|
title:"姓名",
|
||||||
fixed:"left",
|
fixed:"left",
|
||||||
|
@ -20,10 +20,22 @@
|
|||||||
:style="{ opacity: showLayerImgBar ? 1 : 0 }"
|
:style="{ opacity: showLayerImgBar ? 1 : 0 }"
|
||||||
>
|
>
|
||||||
<div class="thumb-row" v-if="ifSetThumb">
|
<div class="thumb-row" v-if="ifSetThumb">
|
||||||
<div class="thumb-box" v-for="(item,i) in imgList" :key="'thumb-box'+i" @click="index=i">
|
<div
|
||||||
|
class="thumb-box"
|
||||||
|
v-for="(item, i) in imgList"
|
||||||
|
:key="'thumb-box' + i"
|
||||||
|
@click="index = i"
|
||||||
|
>
|
||||||
<img :src="item.thumb" />
|
<img :src="item.thumb" />
|
||||||
</div>
|
</div>
|
||||||
<div class="thumb-box-border" :style="{left:`calc(calc( calc(100% - ${100*imgList.length}px) / 2) + ${index*100}px)`}"></div>
|
<div
|
||||||
|
class="thumb-box-border"
|
||||||
|
:style="{
|
||||||
|
left: `calc(calc( calc(100% - ${100 * imgList.length}px) / 2) + ${
|
||||||
|
index * 100
|
||||||
|
}px)`,
|
||||||
|
}"
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<span class="layui-layer-imgtit" v-else>
|
<span class="layui-layer-imgtit" v-else>
|
||||||
<span v-if="imgList[index].alt">{{ imgList[index].alt }}</span>
|
<span v-if="imgList[index].alt">{{ imgList[index].alt }}</span>
|
||||||
@ -44,7 +56,7 @@ export default {
|
|||||||
import { watch, ref, onMounted, nextTick, computed } from "vue";
|
import { watch, ref, onMounted, nextTick, computed } from "vue";
|
||||||
|
|
||||||
export interface LayPhotoProps {
|
export interface LayPhotoProps {
|
||||||
imgList: { src: string; alt: string,thumb:string }[];
|
imgList: { src: string; alt: string; thumb: string }[];
|
||||||
startIndex: number;
|
startIndex: number;
|
||||||
}
|
}
|
||||||
const emit = defineEmits(["resetCalculationPohtosArea"]);
|
const emit = defineEmits(["resetCalculationPohtosArea"]);
|
||||||
@ -76,13 +88,13 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const ifSetThumb=computed(()=>{
|
const ifSetThumb = computed(() => {
|
||||||
let res=false;
|
let res = false;
|
||||||
props.imgList.forEach(e=>{
|
props.imgList.forEach((e) => {
|
||||||
if(e.thumb){
|
if (e.thumb) {
|
||||||
res=true;
|
res = true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return res;
|
return res;
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
@ -94,7 +94,7 @@ export interface LayModalProps {
|
|||||||
isMessage?: boolean;
|
isMessage?: boolean;
|
||||||
appContext?: any;
|
appContext?: any;
|
||||||
startIndex?: number;
|
startIndex?: number;
|
||||||
imgList?: { src: string; alt: string,thumb:string }[];
|
imgList?: { src: string; alt: string; thumb: string }[];
|
||||||
min?: Function;
|
min?: Function;
|
||||||
full?: Function;
|
full?: Function;
|
||||||
restore?: Function;
|
restore?: Function;
|
||||||
|
Loading…
Reference in New Issue
Block a user