-
Notifications
You must be signed in to change notification settings - Fork 54
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat[docs]:新增TTable组件文档示例（表尾合计，表格大小等）
- Loading branch information
Showing
10 changed files
with
367 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| <template> | ||
| <t-layout-page> | ||
| <t-layout-page-item> | ||
| <t-table | ||
| title="表尾合计行" | ||
| sum-text="当页合计" | ||
| :table="table" | ||
| :columns="table.columns" | ||
| :isShowPagination="false" | ||
| show-summary | ||
| /> | ||
| </t-layout-page-item> | ||
| </t-layout-page> | ||
| </template> | ||
|
|
||
| <script setup lang="tsx"> | ||
| import { ref } from "vue" | ||
| const table = ref({ | ||
| data: [ | ||
| { | ||
| id: "1", | ||
| date: "2019-09-25", | ||
| date1: "2019-09-26", | ||
| name: "张三", | ||
| status: "2", | ||
| num: 1, | ||
| address: "广东省广州市天河区" | ||
| }, | ||
| { | ||
| id: "2", | ||
| date: "2019-09-26", | ||
| date1: "2019-09-27", | ||
| name: "张三1", | ||
| status: "1", | ||
| num: 2, | ||
| address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2" | ||
| }, | ||
| { | ||
| id: "3", | ||
| date: "2019-09-26", | ||
| date1: "2019-09-28", | ||
| name: "张三1", | ||
| status: "1", | ||
| num: 3, | ||
| address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2" | ||
| }, | ||
| { | ||
| id: "4", | ||
| date: "2019-09-26", | ||
| date1: "2019-09-29", | ||
| name: "张三1", | ||
| status: "1", | ||
| num: 4, | ||
| address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2" | ||
| } | ||
| ], | ||
| // 表头数据 | ||
| columns: [ | ||
| { prop: "name", label: "姓名", minWidth: "100" }, | ||
| { prop: "date", label: "日期", minWidth: "180" }, | ||
| { prop: "status", label: "状态", minWidth: "80" }, | ||
| { prop: "num", label: "数量", minWidth: "80" }, | ||
| { prop: "address", label: "地址", minWidth: "220" } | ||
| ] | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| <template> | ||
| <t-layout-page> | ||
| <t-layout-page-item> | ||
| <el-radio-group v-model="size" size="small" style="margin-bottom: 15px"> | ||
| <el-radio-button value="">默认</el-radio-button> | ||
| <el-radio-button value="large">Large</el-radio-button> | ||
| <el-radio-button value="default">Default</el-radio-button> | ||
| <el-radio-button value="small">Small</el-radio-button> | ||
| </el-radio-group> | ||
| <t-table | ||
| title="表格大小" | ||
| :table="table" | ||
| :size="size" | ||
| :columns="table.columns" | ||
| :isShowPagination="false" | ||
| /> | ||
| </t-layout-page-item> | ||
| </t-layout-page> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { ref } from "vue" | ||
| const size = ref("") | ||
| const table = ref({ | ||
| border: true, | ||
| data: [ | ||
| { | ||
| id: "1", | ||
| date: "2019-09-25", | ||
| date1: "2019-09-26", | ||
| name: "张三", | ||
| status: "2", | ||
| address: "广东省广州市天河区" | ||
| }, | ||
| { | ||
| id: "2", | ||
| date: "2019-09-26", | ||
| date1: "2019-09-27", | ||
| name: "张三1", | ||
| status: "1", | ||
| address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2" | ||
| }, | ||
| { | ||
| id: "3", | ||
| date: "2019-09-26", | ||
| date1: "2019-09-28", | ||
| name: "张三1", | ||
| status: "1", | ||
| address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2" | ||
| }, | ||
| { | ||
| id: "4", | ||
| date: "2019-09-26", | ||
| date1: "2019-09-29", | ||
| name: "张三1", | ||
| status: "1", | ||
| address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2" | ||
| } | ||
| ], | ||
| // 表头数据 | ||
| columns: [ | ||
| { prop: "name", label: "姓名", minWidth: "100" }, | ||
| { prop: "date", label: "日期", minWidth: "180" }, | ||
| { prop: "status", label: "状态", minWidth: "80" }, | ||
| { prop: "address", label: "地址", minWidth: "220" } | ||
| ] | ||
| }) | ||
| </script> |
Oops, something went wrong.