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

✨(component): 新增 table 组件 columns 配置 totalRow 属性, 用于支持列统计

Browse Source
This commit is contained in:
就眠儀式 2022-07-19 05:01:43 +08:00
parent 2a80deb010
commit 876947c79e
6 changed files with 121 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package/component/src/component/datePicker/index.vue
View File

@ -112,7 +112,6 @@ import {
watch,
defineProps,
defineEmits,
onMounted,
reactive,
provide,
} from "vue";

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

@ -12,7 +12,6 @@ import {
useSlots,
withDefaults,
onMounted,
onUpdated,
StyleValue,
WritableComputedRef,
computed,
@ -319,6 +318,30 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
}
}
};
const hasTotalRow = computed(() => {
let b = false;
props.columns.forEach(item => {
if(item.totalRow) {
b = true;
}
})
return b;
})
const renderTotalRowCell = (column: any) => {
if(column.totalRow) {
if(column.totalRow != true) {
return column.totalRow;
} else {
let total = 0;
tableDataSource.value.forEach(item => {
total = total + item[column.key];
})
return total;
}
}
}
</script>
<template>
@ -472,7 +495,10 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
:lay-skin="skin"
>
<colgroup>
<template v-for="column in columns" :key="column">
<template
v-for="(column, columnIndex) in columns"
:key="columnIndex"
>
<template v-if="tableColumnKeys.includes(column.key)">
<col
:width="column.width"
@ -514,6 +540,17 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
</template>
</table-row>
</template>
<!-- totalRow -->
<tr v-if="hasTotalRow" class="layui-table-total">
<template
v-for="(column, columnIndex) in columns"
:key="columnIndex"
>
<template v-if="tableColumnKeys.includes(column.key)">
<td>{{ renderTotalRowCell(column) }}</td>
</template>
</template>
</tr>
</tbody>
</table>
<lay-empty v-else></lay-empty>

7
package/component/src/provider/index.vue
View File

@ -15,6 +15,7 @@ import {
auto as followSystemColorScheme,
setFetchMethod,
} from "@umijs/ssr-darkreader";
import { v4 as uuidv4 } from "../utils/guidUtil";
export interface LayConfigProviderProps {
locale?: string;
@ -29,6 +30,8 @@ const props = withDefaults(defineProps<LayConfigProviderProps>(), {
theme: "light",
});
const id = uuidv4();
const { locale, setLocaleMessage, mergeLocaleMessage } = useI18n();
const ignoreInlineStyle = [
@ -130,5 +133,7 @@ watch(
</script>
<template>
<slot></slot>
<div :id="id">
<slot></slot>
</div>
</template>

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

@ -912,6 +912,65 @@ export default {
:::
::: title 合并列值
:::
::: demo 通过 `columns` 配置 `type:'number'` 开启序号列。
<template>
<lay-table :columns="columns26" :dataSource="dataSource26"></lay-table>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const columns26 = [
{
title:"账户",
width:"200px",
key:"username"
},{
title:"密码",
width: "300px",
key:"password"
},{
title:"性别",
key:"sex",
totalRow:"合并:"
},{
title:"年龄",
width: "300px",
key:"age",
totalRow: true
},{
title:"备注",
width: "180px",
key:"remark",
ellipsisTooltip: true
}
]
const dataSource26 = [
{username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
]
return {
columns26,
dataSource26,
}
}
}
</script>
:::
::: title 完整表格
:::

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

@ -23,6 +23,7 @@
<li>[新增] table 组件 columns 配置 type 属性 radio 值, 开启单选列。</li>
<li>[新增] table 组件 columns 配置 type 属性 checkbox 值, 开启复选列。</li>
<li>[新增] table 组件 columns 配置 type 属性 number 值, 开启序号列。</li>
<li>[新增] table 组件 columns 配置 totalRow 属性, 开启列值统计。</li>
<li>[新增] table 组件 selected-key 属性, 配置单选列的选中值。</li>
<li>[新增] table 组件 data-source 属性, 长度为 0 时的显示状态。</li>
<li>[新增] date-picker 组件 年月日 范围选择, 重构代码。</li>

32
package/document-component/src/document/zh-CN/guide/theme.md
View File

@ -13,8 +13,8 @@
<script setup>
const themeVariable = {
"--global-primary-color":"red",
"--global-checked-color":"red"
"global-primary-color":"red",
"global-checked-color":"red"
}
</script>
```
@ -22,32 +22,32 @@ const themeVariable = {
:::
```
--global-primary-color: #009688; // 主题色
global-primary-color: #009688; // 主题色
--global-normal-color: #1e9fff; // 通用色
global-normal-color: #1e9fff; // 通用色
--global-warm-color: #ffb800; // 警告色
global-warm-color: #ffb800; // 警告色
--global-danger-color: #ff5722; // 危险色
global-danger-color: #ff5722; // 危险色
--global-checked-color: #5fb878; // 选中色
global-checked-color: #5fb878; // 选中色
--global-border-radius: 2px; // 圆角度
global-border-radius: 2px; // 圆角度
--global-neutral-color-1: #FAFAFA; // 辅助色-1
global-neutral-color-1: #FAFAFA; // 辅助色-1
--global-neutral-color-2: #F6F6F6; // 辅助色-2
global-neutral-color-2: #F6F6F6; // 辅助色-2
--global-neutral-color-3: #eeeeee; // 辅助色-3
global-neutral-color-3: #eeeeee; // 辅助色-3
--global-neutral-color-4: #e2e2e2; // 辅助色-4
global-neutral-color-4: #e2e2e2; // 辅助色-4
--global-neutral-color-5: #dddddd; // 辅助色-5
global-neutral-color-5: #dddddd; // 辅助色-5
--global-neutral-color-6: #d2d2d2; // 辅助色-6
global-neutral-color-6: #d2d2d2; // 辅助色-6
--global-neutral-color-7: #cccccc; // 辅助色-7
global-neutral-color-7: #cccccc; // 辅助色-7
--global-neutral-color-8: #c2c2c2; // 辅助色-8
global-neutral-color-8: #c2c2c2; // 辅助色-8
```