-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat:TTable新增对齐方式demo及列宽自动适应单元格显示内容demo
- Loading branch information
Showing
9 changed files
with
201 additions
and
8 deletions.
There are no files selected for viewing
102 changes: 102 additions & 0 deletions
102
docs/.vuepress/components/docsComponents/TTable/align.vue
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,102 @@ | ||
| <template> | ||
| <t-layout-page> | ||
| <t-layout-page-item> | ||
| <t-table title="对齐方式" :table="table" :align="align" :columns="table.columns"> | ||
| <template #title> | ||
| <el-radio-group v-model="align" size="small" style="margin-bottom: 15px"> | ||
| <el-radio-button label="left">左对齐</el-radio-button> | ||
| <el-radio-button label="center">居中</el-radio-button> | ||
| <el-radio-button label="right">右对齐</el-radio-button> | ||
| </el-radio-group> | ||
| </template> | ||
| <template #toolbar> | ||
| <el-button size="default" type="danger" @click="setDateLeft">点击{{ setDate }}左对齐</el-button> | ||
| <el-button size="default" type="primary" @click="setNameRight">点击{{ setName }}右对齐</el-button> | ||
| </template> | ||
| </t-table> | ||
| </t-layout-page-item> | ||
| </t-layout-page> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| data() { | ||
| return { | ||
| align: 'center', | ||
| setDate: '设置日期', | ||
| setName: '设置姓名', | ||
| table: { | ||
| 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", align: "" }, | ||
| { prop: "date", label: "日期", minWidth: "180", align: "" }, | ||
| { prop: "status", label: "状态", minWidth: "80" }, | ||
| { prop: "address", label: "地址", minWidth: "220" } | ||
| ] | ||
| }, | ||
| } | ||
| }, | ||
| methods: { | ||
| setDateLeft() { | ||
| this.table.columns.forEach(item => { | ||
| if (item.prop === "date") { | ||
| if (item.align == "left") { | ||
| item.align = "" | ||
| this.setDate = "设置日期" | ||
| } else { | ||
| this.setDate = "取消日期" | ||
| item.align = "left" | ||
| } | ||
| } | ||
| }) | ||
| }, | ||
| setNameRight() { | ||
| this.table.columns.forEach(item => { | ||
| if (item.prop === "name") { | ||
| if (item.align == "right") { | ||
| item.align = "" | ||
| this.setName = "设置姓名" | ||
| } else { | ||
| this.setName = "取消姓名" | ||
| item.align = "right" | ||
| } | ||
| } | ||
| }) | ||
| } | ||
| }, | ||
| } | ||
| </script> |
48 changes: 48 additions & 0 deletions
48
docs/.vuepress/components/docsComponents/TTable/allShow.vue
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,48 @@ | ||
| <template> | ||
| <t-layout-page> | ||
| <t-layout-page-item> | ||
| <t-table :table="table" :columns="table.columns" /> | ||
| </t-layout-page-item> | ||
| </t-layout-page> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| data() { | ||
| return { | ||
| table: { | ||
| data: [ | ||
| { | ||
| id: '1', | ||
| date: '2019-09-25', | ||
| name: '张三', | ||
| status: '2', | ||
| address: '广东省广州市天河区' | ||
| }, | ||
| { | ||
| id: '2', | ||
| date: '2019-09-26', | ||
| name: '张三1', | ||
| status: '1', | ||
| address: '广东省广州市天广东省广州市天河区2广东省广州市天广东省广州市天河区2' | ||
| }, | ||
| { | ||
| id: '3', | ||
| date: '2019-09-27', | ||
| name: '张三2', | ||
| status: '3', | ||
| address: '广东省广州市天河区3' | ||
| } | ||
| ], | ||
| columns: [ | ||
| { prop: 'name', label: '姓名', minWidth: '100' }, | ||
| { prop: 'date', label: '日期', minWidth: '180' }, | ||
| { prop: 'address', label: '设置allShow自动显示列宽', allShow: true }, | ||
| { prop: 'date', label: '日期', minWidth: '180' }, | ||
| ] | ||
| }, | ||
| } | ||
| } | ||
| } | ||
| </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
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,14 @@ | ||
| # 对齐方式 | ||
|
|
||
| --- | ||
|
|
||
| <common-code-format> | ||
| <docsComponents-TTable-align slot="source"></docsComponents-TTable-align> | ||
| 配置 | ||
|
|
||
| 在`TTable`组件中添加`align:'center'`设置整个 table 对齐方式 | ||
|
|
||
| 在`columns`中设置`align`设置每列对齐方式（`columns优先级`高于`整体的对齐方式`）----`align`可选值`left`、`center`、`right`<br/> | ||
|
|
||
| <<< @/docs/.vuepress/components/docsComponents/TTable/align.vue | ||
| </common-code-format> |
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,11 @@ | ||
| # 列宽自动适应单元格显示内容 | ||
|
|
||
| --- | ||
|
|
||
| <common-code-format> | ||
| <docsComponents-TTable-allShow slot="source"></docsComponents-TTable-allShow> | ||
|
|
||
| 在`columns`中设置`allShow:true`此列会自适应宽度显示单元格内容 | ||
|
|
||
| <<< @/docs/.vuepress/components/docsComponents/TTable/allShow.vue | ||
| </common-code-format> |
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