Skip to content

Commit dfe3428

Browse files
huangshuweihuangshuwei
committed
add doc
1 parent 33d528a commit dfe3428

File tree

6 files changed

+239
-6
lines changed

6 files changed

+239
-6
lines changed

‎examples/src/docs/en/ve-table/column-resize/basic.md‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
:::anchor Column Drag
1+
:::anchor Column Resizing
22

3-
You can hover the mouse between two columns and drag.If the column width is not set, the default is 50px
3+
You can hover the mouse between two columns and Resizing.If the column width is not set, the default is 50px
44

5-
:::demo 1、Set the min width of resize column through `columnMinWidth`<br>2、Get the callback method of resize column changes through `sizeChange({ column, differWidth, columnWidth })`<br>3、Cols 6, 7, and 8 resizing is disabled through `disableResizing`
5+
:::demo 1、Set the min width of resize column through `columnMinWidth`<br>2、Get the callback method of resize column changes through `sizeChange({ column, differWidth, columnWidth })`
66

77
```html
88
<template>
@@ -64,10 +64,9 @@ You can hover the mouse between two columns and drag.If the column width is not
6464
key: "col6",
6565
title: "Col6",
6666
width: 220,
67-
disableResizing: true,
6867
},
69-
{ field: "col7", key: "col7", title: "Col7", disableResizing: true },
70-
{ field: "col8", key: "col8", title: "Col8", disableResizing: true },
68+
{ field: "col7", key: "col7", title: "Col7" },
69+
{ field: "col8", key: "col8", title: "Col8" },
7170
],
7271
columnResizeInfo: {
7372
column: "",

‎examples/src/docs/en/ve-table/column-resize/disable-resizing.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
:::anchor Disable Column Resizing
2+
3+
Col1, Col2, and Col3 resizing is disabled through `disableResizing`
4+
5+
:::demo
6+
7+
```html
8+
<template>
9+
<ve-table
10+
style="width:100%"
11+
:scroll-width="0"
12+
:columns="columns"
13+
:table-data="tableData"
14+
:border-around="true"
15+
:border-x="true"
16+
:border-y="true"
17+
:column-width-resize-option="columnWidthResizeOption"
18+
/>
19+
</template>
20+
21+
<script>
22+
import Mock from "mockjs";
23+
export default {
24+
data() {
25+
return {
26+
columnWidthResizeOption: {
27+
// default false
28+
enable: true,
29+
// column resize min width
30+
minWidth: 30,
31+
// column size change
32+
sizeChange: ({ column, differWidth, columnWidth }) => {
33+
//
34+
},
35+
},
36+
columns: [
37+
{
38+
field: "index",
39+
key: "index",
40+
title: "#",
41+
width: 50,
42+
align: "center",
43+
fixed: "left",
44+
renderBodyCell: ({ row, column, rowIndex }, h) => {
45+
return ++rowIndex;
46+
},
47+
disableResizing: true,
48+
},
49+
{
50+
field: "col1",
51+
key: "col1",
52+
title: "Col1",
53+
width: 220,
54+
disableResizing: true,
55+
},
56+
{
57+
field: "col2",
58+
key: "col2",
59+
title: "Col2",
60+
width: 220,
61+
disableResizing: true,
62+
},
63+
{ field: "col3", key: "col3", title: "Col3", width: 220 },
64+
{ field: "col4", key: "col4", title: "Col4", width: 220 },
65+
{ field: "col5", key: "col5", title: "Col5", width: 220 },
66+
{
67+
field: "col6",
68+
key: "col6",
69+
title: "Col6",
70+
width: 220,
71+
},
72+
{ field: "col7", key: "col7", title: "Col7" },
73+
{ field: "col8", key: "col8", title: "Col8" },
74+
],
75+
columnResizeInfo: {
76+
column: "",
77+
differWidth: "",
78+
columnWidth: "",
79+
tableWidth: "",
80+
},
81+
tableData: [],
82+
};
83+
},
84+
methods: {
85+
initTableData() {
86+
let data = [];
87+
for (let i = 0; i < 5; i++) {
88+
data.push({
89+
rowKey: i,
90+
col1: `A${i + 1}`,
91+
col2: Mock.Random.sentence(3, 12),
92+
col3: `C${i + 1}`,
93+
col4: `D${i + 1}`,
94+
col5: `E${i + 1}`,
95+
col6: `F${i + 1}`,
96+
col7: `G${i + 1}`,
97+
col8: `H${i + 1}`,
98+
});
99+
}
100+
this.tableData = data;
101+
},
102+
},
103+
created() {
104+
this.initTableData();
105+
},
106+
};
107+
</script>
108+
```
109+
110+
:::

‎examples/src/docs/en/ve-table/column-resize/main.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,22 @@
33
<h2>Column Resize</h2>
44
<Explain />
55
<Basic />
6+
<DisableResizing />
67
<API title="API" anchor="API" />
78
</div>
89
</template>
910
<script>
1011
import Explain from "./explain.md";
1112
import Basic from "./basic.md";
13+
import DisableResizing from "./disable-resizing.md";
1214
import API from "../api/column-width-resize-option-props";
1315
1416
export default {
1517
name: "basic-main",
1618
components: {
1719
Explain,
1820
Basic,
21+
DisableResizing,
1922
API,
2023
},
2124
};

‎examples/src/docs/zh/ve-table/api/db.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -389,6 +389,14 @@ export const db = {
389389
optionalVal: "-",
390390
default: "-",
391391
},
392+
{
393+
param: "disableResizing",
394+
desc: `Disable resizing for this column. Only effective if <code>columnWidthResizeOption</code> is enabled`,
395+
type: `<code>Boolean</code>`,
396+
optionalVal: "-",
397+
default: "false",
398+
rowKey: 46,
399+
},
392400
{
393401
param: "<span class='expand'>ellipsis</span>",
394402
desc: `单元格省略配置。`,

‎examples/src/docs/zh/ve-table/column-resize/disable-resizing.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
:::anchor 禁用列宽拖动
2+
3+
以下示例，列 Col1、Col2、Col3 列宽拖动通过 `disableResizing`被禁用了
4+
5+
:::demo
6+
7+
```html
8+
<template>
9+
<ve-table
10+
style="width:100%"
11+
:scroll-width="0"
12+
:columns="columns"
13+
:table-data="tableData"
14+
:border-around="true"
15+
:border-x="true"
16+
:border-y="true"
17+
:column-width-resize-option="columnWidthResizeOption"
18+
/>
19+
</template>
20+
21+
<script>
22+
import Mock from "mockjs";
23+
export default {
24+
data() {
25+
return {
26+
columnWidthResizeOption: {
27+
// default false
28+
enable: true,
29+
// column resize min width
30+
minWidth: 30,
31+
// column size change
32+
sizeChange: ({ column, differWidth, columnWidth }) => {
33+
//
34+
},
35+
},
36+
columns: [
37+
{
38+
field: "index",
39+
key: "index",
40+
title: "#",
41+
width: 50,
42+
align: "center",
43+
fixed: "left",
44+
renderBodyCell: ({ row, column, rowIndex }, h) => {
45+
return ++rowIndex;
46+
},
47+
disableResizing: true,
48+
},
49+
{
50+
field: "col1",
51+
key: "col1",
52+
title: "Col1",
53+
width: 220,
54+
disableResizing: true,
55+
},
56+
{
57+
field: "col2",
58+
key: "col2",
59+
title: "Col2",
60+
width: 220,
61+
disableResizing: true,
62+
},
63+
{ field: "col3", key: "col3", title: "Col3", width: 220 },
64+
{ field: "col4", key: "col4", title: "Col4", width: 220 },
65+
{ field: "col5", key: "col5", title: "Col5", width: 220 },
66+
{
67+
field: "col6",
68+
key: "col6",
69+
title: "Col6",
70+
width: 220,
71+
},
72+
{ field: "col7", key: "col7", title: "Col7" },
73+
{ field: "col8", key: "col8", title: "Col8" },
74+
],
75+
columnResizeInfo: {
76+
column: "",
77+
differWidth: "",
78+
columnWidth: "",
79+
tableWidth: "",
80+
},
81+
tableData: [],
82+
};
83+
},
84+
methods: {
85+
initTableData() {
86+
let data = [];
87+
for (let i = 0; i < 5; i++) {
88+
data.push({
89+
rowKey: i,
90+
col1: `A${i + 1}`,
91+
col2: Mock.Random.sentence(3, 12),
92+
col3: `C${i + 1}`,
93+
col4: `D${i + 1}`,
94+
col5: `E${i + 1}`,
95+
col6: `F${i + 1}`,
96+
col7: `G${i + 1}`,
97+
col8: `H${i + 1}`,
98+
});
99+
}
100+
this.tableData = data;
101+
},
102+
},
103+
created() {
104+
this.initTableData();
105+
},
106+
};
107+
</script>
108+
```
109+
110+
:::

‎examples/src/docs/zh/ve-table/column-resize/main.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,22 @@
33
<h2>列宽拖动</h2>
44
<Explain />
55
<Basic />
6+
<DisableResizing />
67
<API title="API" anchor="API" />
78
</div>
89
</template>
910
<script>
1011
import Explain from "./explain.md";
1112
import Basic from "./basic.md";
13+
import DisableResizing from "./disable-resizing.md";
1214
import API from "../api/column-width-resize-option-props";
1315
1416
export default {
1517
name: "basic-main",
1618
components: {
1719
Explain,
1820
Basic,
21+
DisableResizing,
1922
API,
2023
},
2124
};

0 commit comments

Comments
 (0)