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

♻️(table): 重构 column 渲染逻辑

Browse Source
This commit is contained in:
就眠儀式 2022-05-11 10:39:09 +08:00
parent 6e6a644967
commit 65e8906f6b
3 changed files with 19 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -479,10 +479,6 @@
padding: 0 10px; padding: 0 10px;
} }
.layui-table-page select {
height: 18px;
}
.layui-table-pagebar { .layui-table-pagebar {
float: right; float: right;
line-height: 26px; line-height: 26px;

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

@ -211,6 +211,7 @@ onMounted(() => {
<div :id="tableId"> <div :id="tableId">
<table class="layui-hide" lay-filter="test"></table> <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">
<!-- 工具栏 -->
<div v-if="defaultToolbar || slot.toolbar" class="layui-table-tool"> <div v-if="defaultToolbar || slot.toolbar" class="layui-table-tool">
<div v-if="slot.toolbar" class="layui-table-tool-temp"> <div v-if="slot.toolbar" class="layui-table-tool-temp">
<slot name="toolbar"></slot> <slot name="toolbar"></slot>
@ -253,7 +254,7 @@ onMounted(() => {
</div> </div>
<div class="layui-table-box"> <div class="layui-table-box">
<!-- table header --> <!-- 表头 -->
<div class="layui-table-header" ref="tableHeader"> <div class="layui-table-header" ref="tableHeader">
<table class="layui-table" :lay-size="size"> <table class="layui-table" :lay-size="size">
<thead> <thead>
@ -308,12 +309,11 @@ onMounted(() => {
</thead> </thead>
</table> </table>
</div> </div>
<!-- table body --> <!-- 表身 -->
<div class="layui-table-body layui-table-main" ref="tableBody"> <div class="layui-table-body layui-table-main" ref="tableBody">
<table class="layui-table" :lay-size="size"> <table class="layui-table" :lay-size="size">
<tbody> <tbody>
<template v-for="data in tableDataSource" :key="data"> <template v-for="data in tableDataSource" :key="data">
<!-- sub table impl -->
<tr <tr
@click.stop="rowClick(data, $event)" @click.stop="rowClick(data, $event)"
@dblclick.stop="rowDoubleClick(data, $event)" @dblclick.stop="rowDoubleClick(data, $event)"
@ -332,8 +332,9 @@ onMounted(() => {
<!-- 数据列 --> <!-- 数据列 -->
<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)">
<!-- 插 槽 Column --> <!-- 插槽列 -->
<template v-if="column.customSlot"> <template v-if="column.customSlot">
<td <td
class="layui-table-cell" class="layui-table-cell"
@ -346,21 +347,18 @@ onMounted(() => {
</td> </td>
</template> </template>
<!-- 匹 配 Column --> <!-- 匹 配 Column -->
<template <template v-else>
v-else <template v-if="column.key in data">
v-for="(value, key) in data" <td
:key="value" class="layui-table-cell"
> :style="{
<td textAlign: column.align,
v-if="column.key == key" flex: column.width ? '0 0 ' + column.width : '1',
class="layui-table-cell" }"
:style="{ >
textAlign: column.align, <span> {{ data[column.key] }} </span>
flex: column.width ? '0 0 ' + column.width : '1', </td>
}" </template>
>
<span> {{ value }} </span>
</td>
</template> </template>
</template> </template>
</template> </template>

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

@ -274,8 +274,8 @@ export default {
] ]
const dataSource5 = [ const dataSource5 = [
{id:"1", username:"root", password:"root", age:"18"}, {id:"1", username:"root", age:"18"},
{id:"2", username:"woow", password:"woow", age:"20"} {id:"2", username:"woow", age:"20"}
] ]
const rowClick5 = function(data) { const rowClick5 = function(data) {