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:47:11 +08:00
parent 784a8f484e
commit d7a3f52783
7 changed files with 131 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package/component/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@layui/layui-vue",
"version": "1.3.5",
"version": "1.3.6",
"author": "就眠儀式",
"license": "MIT",
"description": "a component library for Vue 3 base on layui-vue",

15
package/component/src/component/table/TableRow.vue
View File

@ -6,12 +6,12 @@ export default {
<script lang="ts" setup>
import { Recordable } from "../../types";
import { LayIcon } from "@layui/icons-vue";
import { computed, ref, StyleValue, useSlots, WritableComputedRef } from "vue";
import LayCheckbox from "../checkbox/index.vue";
import LayRadio from "../radio/index.vue";
import LayDropdown from "../dropdown/index.vue";
import LayTooltip from "../tooltip/index.vue";
import { LayIcon } from "@layui/icons-vue";
import LayRadio from "../radio/index.vue";
export interface LayTableRowProps {
index: number;
@ -190,9 +190,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
@dblclick.stop="rowDoubleClick(data, $event)"
@contextmenu.stop="contextmenu(data, $event)"
>
<!-- 数据列 -->
<template v-for="(column, columnIndex) in columns" :key="columnIndex">
<!-- 展示否 -->
<template v-if="tableColumnKeys.includes(column.key)">
<template v-if="column.type == 'radio'">
<td
@ -211,7 +209,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
]"
>
<!-- 树表占位与缩进 -->
<span
v-if="expandSpace && columnIndex === expandIndex"
:style="{ 'margin-right': currentIndentSize + 'px' }"
@ -258,7 +255,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
]"
>
<!-- 树表占位与缩进 -->
<span
v-if="expandSpace && columnIndex === expandIndex"
:style="{ 'margin-right': currentIndentSize + 'px' }"
@ -309,7 +305,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
]"
>
<!-- 树表占位与缩进 -->
<span
v-if="expandSpace && columnIndex === expandIndex"
:style="{ 'margin-right': currentIndentSize + 'px' }"
@ -339,7 +334,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
</td>
</template>
<!-- 插槽列 -->
<template v-if="column.customSlot">
<td
class="layui-table-cell"
@ -357,7 +351,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
]"
>
<!-- 树表占位与缩进 -->
<span
v-if="expandSpace && columnIndex === expandIndex"
:style="{ 'margin-right': currentIndentSize + 'px' }"
@ -394,7 +387,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
</td>
</template>
<!-- 匹 配 Column -->
<template v-else>
<template v-if="column.key in data">
<td
@ -413,7 +405,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
]"
>
<!-- 树表占位与缩进 -->
<span
v-if="expandSpace && columnIndex === expandIndex"
:style="{ 'margin-right': currentIndentSize + 'px' }"
@ -454,12 +445,10 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
</template>
</tr>
<!-- 嵌套表单 -->
<tr class="layui-table-cell-expand" v-if="slot.expand && isExpand">
<slot name="expand" :data="data"></slot>
</tr>
<!-- 树形结构 -->
<template v-if="data[childrenColumnName] && isExpand">
<template
v-for="(children, childrenIndex) in data[childrenColumnName]"

44
package/component/src/component/table/index.less
View File

@ -111,7 +111,7 @@
.layui-table-view .layui-table {
position: relative;
margin: 0;
border-collapse: collapse;
border-collapse: separate;
}
.layui-table-view .layui-table[lay-skin="line"] {
@ -420,24 +420,6 @@
border-right: none !important;
}
.layui-table-fixed-left,
.layui-table-fixed-right {
outline-width: 1px;
outline-style: solid;
outline-color: #eee;
border: none !important;
}
.layui-table-fixed-left-last::after {
position: absolute;
top: 0;
right: 0;
bottom: -1px;
width: 30px;
transform: translate(100%);
transition: box-shadow 0.3s;
}
.layui-table-tool-checkbox{
padding: 10px;
}
@ -447,7 +429,24 @@
margin-bottom: 12px;
}
.layui-table-has-fixed-left .layui-table-fixed-left-last {
overflow: initial!important;
}
.layui-table-has-fixed-right .layui-table-fixed-right-first {
overflow: initial!important;
}
.layui-table-fixed-left-last::after {
position: absolute;
top: 0;
right: 0;
bottom: -1px;
width: 30px;
transform: translate(100%);
transition: box-shadow .3s;
content: "";
pointer-events: none;
box-shadow: inset 10px 0 8px -8px #00000026;
}
@ -458,10 +457,9 @@
left: 0;
width: 30px;
transform: translate(-100%);
transition: box-shadow 0.3s;
}
.layui-table-fixed-right-first::after {
transition: box-shadow .3s;
content: "";
pointer-events: none;
box-shadow: inset -10px 0 8px -8px #00000026;
}

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

@ -176,7 +176,7 @@ const exportData = () => {
throw new Error("exception");
}
});
} catch (e) {}
} catch (e) { }
});
tableDataSource.value.forEach((item) => {
let obj: any = [];
@ -250,13 +250,51 @@ const getScrollWidth = () => {
}
};
const hasl = ref(false);
const hasr = ref(false);
const classes = computed(() => {
return [
hasl.value ? "layui-table-has-fixed-left" : "",
hasr.value ? "layui-table-has-fixed-right" : "",
];
});
onMounted(() => {
getScrollWidth();
getFixedColumn();
tableBody.value?.addEventListener("scroll", () => {
tableHeader.value!.scrollLeft = tableBody.value?.scrollLeft || 0;
getFixedColumn();
});
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;
hasr.value = true;
}
}
} else {
hasl.value = false;
hasr.value = false;
}
}
const slotsData = ref<string[]>([]);
props.columns.map((value: any) => {
@ -265,8 +303,8 @@ props.columns.map((value: any) => {
}
});
const childrenExpandSpace = ref(false);
const currentIndentSize = ref(0);
const childrenExpandSpace = ref(false);
props.dataSource.map((value: any) => {
if (value[props.childrenColumnName]) {
@ -336,7 +374,7 @@ const renderTotalRowCell = (column: any) => {
} else {
let total = 0;
tableDataSource.value.forEach((item) => {
total = total + item[column.key];
total = total + Number(item[column.key]);
});
return total;
}
@ -347,7 +385,7 @@ const renderTotalRowCell = (column: any) => {
<template>
<div :id="tableId">
<table class="layui-hide" lay-filter="test"></table>
<div class="layui-form layui-border-box layui-table-view">
<div class="layui-form layui-border-box layui-table-view" :class="classes">
<!-- 工具栏 -->
<div v-if="defaultToolbar || slot.toolbar" class="layui-table-tool">
<div v-if="slot.toolbar" class="layui-table-tool-temp">
@ -360,31 +398,15 @@ 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>
@ -392,65 +414,40 @@ const renderTotalRowCell = (column: any) => {
<div class="layui-table-box">
<!-- 表头 -->
<div
class="layui-table-header"
:style="[{ 'padding-right': `${scrollWidthCell}px` }]"
>
<div
class="layui-table-header-wrapper"
ref="tableHeader"
:style="[
scrollWidthCell > 0 ? 'border-right: 1px solid #eee;' : '',
]"
>
<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>
@ -462,21 +459,11 @@ 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>
@ -487,56 +474,28 @@ 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>
@ -545,12 +504,8 @@ const renderTotalRowCell = (column: any) => {
</template>
</table-row>
</template>
<!-- totalRow -->
<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>
@ -562,15 +517,8 @@ 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>

2
package/document-component/src/document/zh-CN/components/table.md
View File

@ -977,7 +977,7 @@ export default {
::: demo
<template>
<lay-table :columns="columns5" id="id" :expand-index="1" :data-source="dataSource5" v-model:selected-keys="selectedKeys5" :checkbox="checkbox5" :default-toolbar="defaultToolbar5" @row="rowClick5" height="200px">
<lay-table :columns="columns5" id="id" :expand-index="1" :data-source="dataSource5" v-model:selected-keys="selectedKeys5" :checkbox="checkbox5" :default-toolbar="defaultToolbar5" @row="rowClick5" max-height="200px">
<template v-slot:toolbar>
<lay-button size="sm">新增</lay-button>
<lay-button size="sm">删除</lay-button>

12
package/document-component/src/document/zh-CN/guide/changelog.md
View File

@ -11,6 +11,18 @@
<template>
<lay-timeline>
<lay-timeline-item title="1.3.x">
<ul>
<a name="1-3-6"></a>
<li>
<h3>1.3.6 <span class="layui-badge-rim">2022-07-24</span></h3>
<ul>
<li>[修复] table 组件 totalRow 属性, 计算 string 类型数字拼接的问题。</li>
<li>[修复] table 组件 columns 配置 fixed 属性开启时, 固定列无阴影的问题。</li>
<li>[修复] table 组件 filterColumns 布局。</li>
<li>[优化] panel 组件 css 样式。</li>
</ul>
</li>
</ul>
<ul>
<a name="1-3-5"></a>
<li>

16
package/document-component/src/view/index.vue
View File

@ -186,21 +186,7 @@
target="_blank"
>
<lay-avatar
src="https://portrait.gitee.com/uploads/avatars/namespace/2319/6958819_pear-admin_1643085106.png"
style="background: transparent"
></lay-avatar>
</a>
</lay-tooltip>
</lay-col>
<lay-col :md="3">
<lay-tooltip content="Pear Admin" position="top">
<a
style="height: 40px; display: inline-block"
href="http://www.pearadmin.com"
target="_blank"
>
<lay-avatar
src="https://portrait.gitee.com/uploads/avatars/namespace/2319/6958819_pear-admin_1643085106.png"
src="https://portrait.gitee.com/uploads/avatars/namespace/2319/6958819_pear-admin_1643085106.png!avatar100"
style="background: transparent"
></lay-avatar>
</a>