Skip to content

Commit 4293f0d

Browse files
wocwinwocwin
committed
feat:TTable新增对齐方式demo及列宽自动适应单元格显示内容demo
1 parent c5792f9 commit 4293f0d

File tree

9 files changed

+201
-8
lines changed

9 files changed

+201
-8
lines changed

‎docs/.vuepress/components/docsComponents/TTable/align.vue

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<template>
2+
<t-layout-page>
3+
<t-layout-page-item>
4+
<t-table title="对齐方式" :table="table" :align="align" :columns="table.columns">
5+
<template #title>
6+
<el-radio-group v-model="align" size="small" style="margin-bottom: 15px">
7+
<el-radio-button label="left">左对齐</el-radio-button>
8+
<el-radio-button label="center">居中</el-radio-button>
9+
<el-radio-button label="right">右对齐</el-radio-button>
10+
</el-radio-group>
11+
</template>
12+
<template #toolbar>
13+
<el-button size="default" type="danger" @click="setDateLeft">点击{{ setDate }}左对齐</el-button>
14+
<el-button size="default" type="primary" @click="setNameRight">点击{{ setName }}右对齐</el-button>
15+
</template>
16+
</t-table>
17+
</t-layout-page-item>
18+
</t-layout-page>
19+
</template>
20+
21+
<script>
22+
export default {
23+
data() {
24+
return {
25+
align: 'center',
26+
setDate: '设置日期',
27+
setName: '设置姓名',
28+
table: {
29+
data: [
30+
{
31+
id: "1",
32+
date: "2019-09-25",
33+
date1: "2019-09-26",
34+
name: "张三",
35+
status: "2",
36+
address: "广东省广州市天河区"
37+
},
38+
{
39+
id: "2",
40+
date: "2019-09-26",
41+
date1: "2019-09-27",
42+
name: "张三1",
43+
status: "1",
44+
address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2"
45+
},
46+
{
47+
id: "3",
48+
date: "2019-09-26",
49+
date1: "2019-09-28",
50+
name: "张三1",
51+
status: "1",
52+
address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2"
53+
},
54+
{
55+
id: "4",
56+
date: "2019-09-26",
57+
date1: "2019-09-29",
58+
name: "张三1",
59+
status: "1",
60+
address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2"
61+
}
62+
],
63+
columns: [
64+
{ prop: "name", label: "姓名", minWidth: "100", align: "" },
65+
{ prop: "date", label: "日期", minWidth: "180", align: "" },
66+
{ prop: "status", label: "状态", minWidth: "80" },
67+
{ prop: "address", label: "地址", minWidth: "220" }
68+
]
69+
},
70+
71+
}
72+
},
73+
methods: {
74+
setDateLeft() {
75+
this.table.columns.forEach(item => {
76+
if (item.prop === "date") {
77+
if (item.align == "left") {
78+
item.align = ""
79+
this.setDate = "设置日期"
80+
} else {
81+
this.setDate = "取消日期"
82+
item.align = "left"
83+
}
84+
}
85+
})
86+
},
87+
setNameRight() {
88+
this.table.columns.forEach(item => {
89+
if (item.prop === "name") {
90+
if (item.align == "right") {
91+
item.align = ""
92+
this.setName = "设置姓名"
93+
} else {
94+
this.setName = "取消姓名"
95+
item.align = "right"
96+
}
97+
}
98+
})
99+
}
100+
},
101+
}
102+
</script>

‎docs/.vuepress/components/docsComponents/TTable/allShow.vue

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<t-layout-page>
3+
<t-layout-page-item>
4+
<t-table :table="table" :columns="table.columns" />
5+
</t-layout-page-item>
6+
</t-layout-page>
7+
</template>
8+
9+
<script>
10+
export default {
11+
data() {
12+
return {
13+
table: {
14+
data: [
15+
{
16+
id: '1',
17+
date: '2019-09-25',
18+
name: '张三',
19+
status: '2',
20+
address: '广东省广州市天河区'
21+
},
22+
{
23+
id: '2',
24+
date: '2019-09-26',
25+
name: '张三1',
26+
status: '1',
27+
address: '广东省广州市天广东省广州市天河区2广东省广州市天广东省广州市天河区2'
28+
},
29+
{
30+
id: '3',
31+
date: '2019-09-27',
32+
name: '张三2',
33+
status: '3',
34+
address: '广东省广州市天河区3'
35+
}
36+
],
37+
columns: [
38+
{ prop: 'name', label: '姓名', minWidth: '100' },
39+
{ prop: 'date', label: '日期', minWidth: '180' },
40+
{ prop: 'address', label: '设置allShow自动显示列宽', allShow: true },
41+
{ prop: 'date', label: '日期', minWidth: '180' },
42+
]
43+
},
44+
45+
}
46+
}
47+
}
48+
</script>

‎docs/.vuepress/components/docsComponents/TTable/base.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
title="此排序仅可点击图标才生效"
77
:table="table"
88
:columns="columns"
9+
:header-cell-style="{background: 'red',height: '50px'}"
10+
:row-style="{ height: '52px'}"
911
size="mini"
1012
:rowClassName="rowClassName"
1113
/>

‎docs/.vuepress/config.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,8 @@ module.exports = {
160160
'TTable/pageCheck', // 基本复选--翻页选中
161161
'TTable/firstRadioOrIndex', // 显示单选框和序列号
162162
'TTable/firstSelectionOrIndex', //显示多选框和序列号
163+
'TTable/allShow', //列宽自动适应单元格显示内容
164+
'TTable/align', //对齐方式
163165
'TTable/expand', // 展开行
164166
'TTable/pagination', // 分页
165167
'TTable/virtual', // 虚拟列表

‎docs/baseComponents/TTable/align.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# 对齐方式
2+
3+
---
4+
5+
<common-code-format>
6+
<docsComponents-TTable-align slot="source"></docsComponents-TTable-align>
7+
配置
8+
9+
在`TTable`组件中添加`align:'center'`设置整个 table 对齐方式
10+
11+
在`columns`中设置`align`设置每列对齐方式（`columns优先级`高于`整体的对齐方式`）----`align`可选值`left`、`center`、`right`<br/>
12+
13+
<<< @/docs/.vuepress/components/docsComponents/TTable/align.vue
14+
</common-code-format>

‎docs/baseComponents/TTable/allShow.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# 列宽自动适应单元格显示内容
2+
3+
---
4+
5+
<common-code-format>
6+
<docsComponents-TTable-allShow slot="source"></docsComponents-TTable-allShow>
7+
8+
在`columns`中设置`allShow:true`此列会自适应宽度显示单元格内容
9+
10+
<<< @/docs/.vuepress/components/docsComponents/TTable/allShow.vue
11+
</common-code-format>

‎docs/baseComponents/TTable/help.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@
3434
| ---currentPage | 是否需要显示切换页条数 | Number | - |
3535
| columns | 表头信息 | Array | [] |
3636
| ----sort | 排序 （设置：sort:true） | Boolean | false |
37+
| ----allShow | 是否开启列宽自动适应单元格显示内容 | Boolean | false |
38+
| ----align | 设置每列对齐方式,此优先级`高于`整体的对齐方式` | string | 'center' |
3739
| ----headerRequired | 是否显示表头必填'\*' | Boolean | false |
3840
| ----renderHeader | 列标题 Label 区域渲染使用的可以用 jsx 方式 | Function | - |
3941
| ----allShow | 自动根据内容撑满列宽(默认取自己设置的minWidth,设置allShow:true，自动根据内容撑满列宽) | Boolean | - |
@@ -57,6 +59,7 @@
5759
| ----configEdit | 表格编辑配置（开启编辑功能有效） | Object | - |
5860
| ----------rules | 规则（可依据 elementUI el-form 配置————对应 columns 的 prop 值） | Object | - |
5961
| ----------label | placeholder 显示 | String | - |
62+
| ----------className | 每一项的自定义class | String | - |
6063
| ----------editComponent | 组件名称可直接指定全局注册的组件，也可引入第三方组件 | String | input |
6164
| ----------bind | 第三方 UI 的 Attributes及tooltip的Attributes | Object | - |
6265
| ----------eventHandle | 第三方 UI 的 事件（返回两个参数，第一个自己自带，第二个 scope） | Object | - |
@@ -107,6 +110,7 @@
107110
| rowClassName | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String | - |
108111
| isSlotToolbar | TAdaptivePage组件是否使用了Toolbar插槽 | Boolean | - |
109112
| isSlotTitle | TAdaptivePage组件是否使用了title插槽 | Boolean | - |
113+
| align | 整体对齐方式 (选值`left`、`center`、`right`) | String | 'center' |
110114

111115
## Methods 方法（继承el-table的所有方法）
112116

‎packages/table/src/TTableColumn.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
:prop="item.prop"
44
:label="item.label"
55
:type="item.type"
6-
:align="item.align || 'center'"
6+
:align="item.align || align"
77
:fixed="item.fixed"
88
:min-width="item['min-width'] || item.minWidth || item.width"
99
>
@@ -26,7 +26,7 @@
2626
:width="val.allShow ? flexColumnWidth(val.prop,table.data,index,val['min-width'] || val.minWidth || val.width) : val.width"
2727
:sortable="val.sort"
2828
:render-header="val.renderHeader||(val.headerRequired&&renderHeader)"
29-
:align="val.align || 'center'"
29+
:align="val.align || align"
3030
:fixed="val.fixed"
3131
:show-overflow-tooltip="val.noShowTip"
3232
v-bind="{...val.bind,...$attrs}"
@@ -98,6 +98,10 @@ export default {
9898
default: () => {
9999
return {}
100100
}
101+
},
102+
align: {
103+
type: String,
104+
default: 'center'
101105
}
102106
},
103107
methods: {

‎packages/table/src/index.vue

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
width: table.firstColumn.width || 55,
105105
label: table.firstColumn.label,
106106
fixed: table.firstColumn.fixed,
107-
align: table.firstColumn.align || 'center',
107+
align: table.firstColumn.align || align,
108108
'reserve-selection': table.firstColumn.isPaging || false,
109109
selectable: table.firstColumn.selectable || selectable,
110110
...table.firstColumn.bind,
@@ -124,7 +124,7 @@
124124
(table.firstColumn.type === 'expand' && '') ||
125125
'',
126126
fixed: table.firstColumn.fixed,
127-
align: table.firstColumn.align || 'center',
127+
align: table.firstColumn.align || align,
128128
...table.firstColumn.bind,
129129
...$attrs,
130130
}"
@@ -159,7 +159,7 @@
159159
width: item.width || 55,
160160
label: item.label,
161161
fixed: item.fixed,
162-
align: item.align || 'center',
162+
align: item.align || align,
163163
'reserve-selection': item.isPaging || false,
164164
selectable: item.selectable || selectable,
165165
...item.bind,
@@ -180,7 +180,7 @@
180180
(item.type === 'expand' && '') ||
181181
'',
182182
fixed: item.fixed,
183-
align: item.align || 'center',
183+
align: item.align || align,
184184
...item.bind,
185185
...$attrs,
186186
}"
@@ -221,7 +221,7 @@
221221
:class-name="item.allShow&&!isEditCell?'flex_column_width':''"
222222
:width="item.allShow&&!isEditCell ? flexColumnWidth(item.prop,table.data,index,item['min-width'] || item.minWidth || item.width) : item.width"
223223
:sortable="item.sort || sortable"
224-
:align="item.align || 'center'"
224+
:align="item.align || align"
225225
:fixed="item.fixed"
226226
:show-overflow-tooltip="isShowOverflowTooltip(item)"
227227
v-bind="{ ...item.bind, ...$attrs }"
@@ -381,6 +381,7 @@
381381
:key="index + 'i'"
382382
:item="item"
383383
:table="table"
384+
:align="align"
384385
:tableRef="$refs['el-table']"
385386
>
386387
<template v-for="(index, name) in $slots" v-slot:[name]>
@@ -400,7 +401,7 @@
400401
:min-width="table.operatorConfig && table.operatorConfig.minWidth"
401402
:width="table.operatorConfig && table.operatorConfig.width"
402403
:align="
403-
(table.operatorConfig && table.operatorConfig.align) || 'center'
404+
(table.operatorConfig && table.operatorConfig.align) || align
404405
"
405406
v-bind="{
406407
...(table.operatorConfig && table.operatorConfig.bind),
@@ -541,6 +542,11 @@ export default {
541542
type: String,
542543
default: '保存'
543544
},
545+
// table 全局对齐方式，可选项'left' | 'center' | 'right'
546+
align: {
547+
type: String,
548+
default: 'center'
549+
},
544550
// 是否开启tree树形结构样式
545551
isShowTreeStyle: Boolean,
546552
// 表格标题

0 commit comments

Comments
 (0)