✨(component): 新增 table 组件 columns 配置 totalRow 属性, 用于支持列统计
This commit is contained in:
@@ -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 完整表格
|
||||
:::
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
```
|
||||
Reference in New Issue
Block a user