(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-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

View File

@ -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;
} }
}) })
@ -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>

View File

@ -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",

View File

@ -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>

View File

@ -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;