✨(component): 发布 1.3.6
This commit is contained in:
就眠儀式
parent
d7a3f52783
commit
472389772a
@ -176,7 +176,7 @@ const exportData = () => {
|
||||
throw new Error("exception");
|
||||
}
|
||||
});
|
||||
} catch (e) { }
|
||||
} catch (e) {}
|
||||
});
|
||||
tableDataSource.value.forEach((item) => {
|
||||
let obj: any = [];
|
||||
@ -268,32 +268,34 @@ onMounted(() => {
|
||||
});
|
||||
window.onresize = () => {
|
||||
getFixedColumn();
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
const getFixedColumn = () => {
|
||||
tableHeader.value!.scrollLeft = tableBody.value?.scrollLeft || 0;
|
||||
// @ts-ignore
|
||||
if( tableBody.value?.scrollWidth > tableBody.value?.clientWidth) {
|
||||
if (tableBody.value?.scrollLeft == 0) {
|
||||
hasl.value = false;
|
||||
hasr.value = true;
|
||||
} else {
|
||||
// @ts-ignore
|
||||
if (tableBody.value?.scrollLeft + tableBody.value?.offsetWidth > tableBody.value?.scrollWidth) {
|
||||
hasl.value = true;
|
||||
hasr.value = false;
|
||||
} else {
|
||||
hasl.value = true;
|
||||
if (tableBody.value?.scrollWidth > tableBody.value?.clientWidth) {
|
||||
if (tableBody.value?.scrollLeft == 0) {
|
||||
hasl.value = false;
|
||||
hasr.value = true;
|
||||
} else {
|
||||
// @ts-ignore
|
||||
if (
|
||||
tableBody.value?.scrollLeft + tableBody.value?.offsetWidth >
|
||||
tableBody.value?.scrollWidth
|
||||
) {
|
||||
hasl.value = true;
|
||||
hasr.value = false;
|
||||
} else {
|
||||
hasl.value = true;
|
||||
hasr.value = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
hasl.value = false;
|
||||
hasr.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const slotsData = ref<string[]>([]);
|
||||
|
||||
@ -398,15 +400,31 @@ const renderTotalRowCell = (column: any) => {
|
||||
</div>
|
||||
<template #content>
|
||||
<div class="layui-table-tool-checkbox">
|
||||
<lay-checkbox v-for="column in columns" v-model="tableColumnKeys" skin="primary" :key="column.key"
|
||||
:value="column.key">{{ column.title }}</lay-checkbox>
|
||||
<lay-checkbox
|
||||
v-for="column in columns"
|
||||
v-model="tableColumnKeys"
|
||||
skin="primary"
|
||||
:key="column.key"
|
||||
:value="column.key"
|
||||
>{{ column.title }}</lay-checkbox
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
<div class="layui-inline" title="导出" lay-event="LAYTABLE_PRINT" @click="exportData()">
|
||||
<div
|
||||
class="layui-inline"
|
||||
title="导出"
|
||||
lay-event="LAYTABLE_PRINT"
|
||||
@click="exportData()"
|
||||
>
|
||||
<i class="layui-icon layui-icon-export"></i>
|
||||
</div>
|
||||
<div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT" @click="print()">
|
||||
<div
|
||||
class="layui-inline"
|
||||
title="打印"
|
||||
lay-event="LAYTABLE_PRINT"
|
||||
@click="print()"
|
||||
>
|
||||
<i class="layui-icon layui-icon-print"></i>
|
||||
</div>
|
||||
</div>
|
||||
@ -414,40 +432,59 @@ const renderTotalRowCell = (column: any) => {
|
||||
|
||||
<div class="layui-table-box">
|
||||
<!-- 表头 -->
|
||||
<div class="layui-table-header" :style="[{ 'padding-right': `${scrollWidthCell}px` }]">
|
||||
<div
|
||||
class="layui-table-header"
|
||||
:style="[{ 'padding-right': `${scrollWidthCell}px` }]"
|
||||
>
|
||||
<div class="layui-table-header-wrapper" ref="tableHeader">
|
||||
<table class="layui-table" :lay-size="size" :lay-skin="skin">
|
||||
<colgroup>
|
||||
<template v-for="column in columns" :key="column">
|
||||
<template v-if="tableColumnKeys.includes(column.key)">
|
||||
<col :width="column.width" :style="{
|
||||
minWidth: column.minWidth ? column.minWidth : '50px',
|
||||
}" />
|
||||
<col
|
||||
:width="column.width"
|
||||
:style="{
|
||||
minWidth: column.minWidth ? column.minWidth : '50px',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<template v-for="(column, columnIndex) in columns" :key="column">
|
||||
<th v-if="tableColumnKeys.includes(column.key)" class="layui-table-cell" :class="[
|
||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||
renderFixedClassName(column, columnIndex),
|
||||
column.type == 'checkbox'
|
||||
? 'layui-table-cell-checkbox'
|
||||
: '',
|
||||
column.type == 'radio' ? 'layui-table-cell-radio' : '',
|
||||
column.type == 'number'
|
||||
? 'layui-table-cell-number'
|
||||
: '',
|
||||
]" :style="[
|
||||
{
|
||||
textAlign: column.align,
|
||||
},
|
||||
renderFixedStyle(column, columnIndex),
|
||||
]">
|
||||
<template
|
||||
v-for="(column, columnIndex) in columns"
|
||||
:key="column"
|
||||
>
|
||||
<th
|
||||
v-if="tableColumnKeys.includes(column.key)"
|
||||
class="layui-table-cell"
|
||||
:class="[
|
||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||
renderFixedClassName(column, columnIndex),
|
||||
column.type == 'checkbox'
|
||||
? 'layui-table-cell-checkbox'
|
||||
: '',
|
||||
column.type == 'radio' ? 'layui-table-cell-radio' : '',
|
||||
column.type == 'number'
|
||||
? 'layui-table-cell-number'
|
||||
: '',
|
||||
]"
|
||||
:style="[
|
||||
{
|
||||
textAlign: column.align,
|
||||
},
|
||||
renderFixedStyle(column, columnIndex),
|
||||
]"
|
||||
>
|
||||
<template v-if="column.type == 'checkbox'">
|
||||
<lay-checkbox v-model="hasChecked" :is-indeterminate="!allChecked" skin="primary" value="all"
|
||||
@change="changeAll" />
|
||||
<lay-checkbox
|
||||
v-model="hasChecked"
|
||||
:is-indeterminate="!allChecked"
|
||||
skin="primary"
|
||||
value="all"
|
||||
@change="changeAll"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>
|
||||
@ -459,11 +496,21 @@ const renderTotalRowCell = (column: any) => {
|
||||
</template>
|
||||
</span>
|
||||
<!-- 插槽 -->
|
||||
<span v-if="column.sort" class="layui-table-sort layui-inline" lay-sort>
|
||||
<i @click.stop="sortTable($event, column.key, 'asc')" class="layui-edge layui-table-sort-asc"
|
||||
title="升序"></i>
|
||||
<i @click.stop="sortTable($event, column.key, 'desc')"
|
||||
class="layui-edge layui-table-sort-desc" title="降序"></i>
|
||||
<span
|
||||
v-if="column.sort"
|
||||
class="layui-table-sort layui-inline"
|
||||
lay-sort
|
||||
>
|
||||
<i
|
||||
@click.stop="sortTable($event, column.key, 'asc')"
|
||||
class="layui-edge layui-table-sort-asc"
|
||||
title="升序"
|
||||
></i>
|
||||
<i
|
||||
@click.stop="sortTable($event, column.key, 'desc')"
|
||||
class="layui-edge layui-table-sort-desc"
|
||||
title="降序"
|
||||
></i>
|
||||
</span>
|
||||
</template>
|
||||
</th>
|
||||
@ -474,28 +521,56 @@ const renderTotalRowCell = (column: any) => {
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表身 -->
|
||||
<div class="layui-table-body layui-table-main" :style="{ height: height, maxHeight: maxHeight }"
|
||||
ref="tableBody">
|
||||
<table v-if="tableDataSource.length > 0" class="layui-table" :class="{ 'layui-table-even': props.even }"
|
||||
:lay-size="size" :lay-skin="skin">
|
||||
<div
|
||||
class="layui-table-body layui-table-main"
|
||||
:style="{ height: height, maxHeight: maxHeight }"
|
||||
ref="tableBody"
|
||||
>
|
||||
<table
|
||||
v-if="tableDataSource.length > 0"
|
||||
class="layui-table"
|
||||
:class="{ 'layui-table-even': props.even }"
|
||||
:lay-size="size"
|
||||
:lay-skin="skin"
|
||||
>
|
||||
<colgroup>
|
||||
<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)">
|
||||
<col :width="column.width" :style="{
|
||||
minWidth: column.minWidth ? column.minWidth : '50px',
|
||||
}" />
|
||||
<col
|
||||
:width="column.width"
|
||||
:style="{
|
||||
minWidth: column.minWidth ? column.minWidth : '50px',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<!-- 渲染 -->
|
||||
<template v-for="(data, index) in tableDataSource" :key="index">
|
||||
<table-row :id="id" :index="index" :data="data" :columns="columns" :indent-size="indentSize"
|
||||
:currentIndentSize="currentIndentSize" :tableColumnKeys="tableColumnKeys"
|
||||
:expandSpace="childrenExpandSpace" :expandIndex="expandIndex" :cellStyle="cellStyle"
|
||||
:cellClassName="cellClassName" :rowStyle="rowStyle" :rowClassName="rowClassName" @row="rowClick"
|
||||
@row-double="rowDoubleClick" @contextmenu="contextmenu" v-model:selectedKeys="tableSelectedKeys"
|
||||
v-model:selectedKey="tableSelectedKey">
|
||||
<table-row
|
||||
:id="id"
|
||||
:index="index"
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
:indent-size="indentSize"
|
||||
:currentIndentSize="currentIndentSize"
|
||||
:tableColumnKeys="tableColumnKeys"
|
||||
:expandSpace="childrenExpandSpace"
|
||||
:expandIndex="expandIndex"
|
||||
:cellStyle="cellStyle"
|
||||
:cellClassName="cellClassName"
|
||||
:rowStyle="rowStyle"
|
||||
:rowClassName="rowClassName"
|
||||
@row="rowClick"
|
||||
@row-double="rowDoubleClick"
|
||||
@contextmenu="contextmenu"
|
||||
v-model:selectedKeys="tableSelectedKeys"
|
||||
v-model:selectedKey="tableSelectedKey"
|
||||
>
|
||||
<template v-for="name in slotsData" #[name]="{ data }">
|
||||
<slot :name="name" :data="data"></slot>
|
||||
</template>
|
||||
@ -505,7 +580,10 @@ const renderTotalRowCell = (column: any) => {
|
||||
</table-row>
|
||||
</template>
|
||||
<tr v-if="hasTotalRow" class="layui-table-total">
|
||||
<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)">
|
||||
<td>{{ renderTotalRowCell(column) }}</td>
|
||||
</template>
|
||||
@ -517,8 +595,15 @@ const renderTotalRowCell = (column: any) => {
|
||||
</div>
|
||||
</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"
|
||||
@jump="change">
|
||||
<lay-page
|
||||
show-page
|
||||
show-skip
|
||||
show-limit
|
||||
:total="page.total"
|
||||
:limit="page.limit"
|
||||
v-model="page.current"
|
||||
@jump="change"
|
||||
>
|
||||
<template #prev>
|
||||
<lay-icon type="layui-icon-left" />
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user