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

✨(component): 发布 1.3.2

Browse Source
This commit is contained in:
就眠儀式 2022-07-21 13:01:40 +08:00
parent c94519bd2f
commit 313796d0be
1 changed files with 90 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -392,87 +392,98 @@ 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
<div class="layui-table-header-wrapper" ref="tableHeader" :style="[scrollWidthCell > 0 ? 'border-right: 1px solid #eee;' : '']"> class="layui-table-header"
<table class="layui-table" :lay-size="size" :lay-skin="skin"> :style="[{ 'padding-right': `${scrollWidthCell}px` }]"
<colgroup> >
<template v-for="column in columns" :key="column"> <div
<template v-if="tableColumnKeys.includes(column.key)"> class="layui-table-header-wrapper"
<col ref="tableHeader"
:width="column.width" :style="[
:style="{ scrollWidthCell > 0 ? 'border-right: 1px solid #eee;' : '',
minWidth: column.minWidth ? column.minWidth : '50px', ]"
}" >
/> <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',
}"
/>
</template>
</template> </template>
</template> </colgroup>
</colgroup> <thead>
<thead> <tr>
<tr> <template
<template v-for="(column, columnIndex) in columns"
v-for="(column, columnIndex) in columns" :key="column"
: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'"> <th
<lay-checkbox v-if="tableColumnKeys.includes(column.key)"
v-model="hasChecked" class="layui-table-cell"
:is-indeterminate="!allChecked" :class="[
skin="primary" column.fixed ? `layui-table-fixed-${column.fixed}` : '',
value="all" renderFixedClassName(column, columnIndex),
@change="changeAll" column.type == 'checkbox'
/> ? 'layui-table-cell-checkbox'
</template> : '',
<template v-else> column.type == 'radio' ? 'layui-table-cell-radio' : '',
<span> column.type == 'number'
<template v-if="column.titleSlot"> ? 'layui-table-cell-number'
<slot :name="column.titleSlot"></slot> : '',
</template> ]"
<template v-else> :style="[
{{ column.title }} {
</template> textAlign: column.align,
</span> },
<!-- 插槽 --> renderFixedStyle(column, columnIndex),
<span ]"
v-if="column.sort" >
class="layui-table-sort layui-inline" <template v-if="column.type == 'checkbox'">
lay-sort <lay-checkbox
> v-model="hasChecked"
<i :is-indeterminate="!allChecked"
@click.stop="sortTable($event, column.key, 'asc')" skin="primary"
class="layui-edge layui-table-sort-asc" value="all"
title="升序" @change="changeAll"
></i> />
<i </template>
@click.stop="sortTable($event, column.key, 'desc')" <template v-else>
class="layui-edge layui-table-sort-desc" <span>
title="降序" <template v-if="column.titleSlot">
></i> <slot :name="column.titleSlot"></slot>
</span> </template>
</template> <template v-else>
</th> {{ column.title }}
</template> </template>
</tr> </span>
</thead> <!-- 插槽 -->
</table> <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>
</template>
</tr>
</thead>
</table>
</div> </div>
</div> </div>
<!-- 表身 --> <!-- 表身 -->