theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(component): 发布 1.3.6

Browse Source
This commit is contained in:
就眠儀式 2022-07-24 03:48:55 +08:00
parent d7a3f52783
commit 472389772a
1 changed files with 150 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
package/component/src/component/table/index.vue
View File

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