Skip to content

Commit 3c95c93

Browse files
author
zzj
committed
fix:行号限制height改为最小高度
1 parent 0cd51fc commit 3c95c93

File tree

6 files changed

+280
-7
lines changed

6 files changed

+280
-7
lines changed

‎examples/features/fixedLeft.vue‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -116,18 +116,19 @@ export default {
116116
click() {
117117
// this.show = !this.show
118118
this.list = aTestList;
119-
120-
setTimeout(() => {
121-
this.getImg = imgSrc;
122-
123-
this.columns.push({
119+
this.columns.push({
124120
title: 'img',
125121
key: 'img',
126122
width: 100,
127123
fixed: 'left',
128124
sortable: true,
129125
type: 'slot',
130126
})
127+
128+
setTimeout(() => {
129+
this.getImg = imgSrc;
130+
131+
131132
132133
}, 2000)
133134
},

‎examples/features/fixedLeft1.vue‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<template>
2+
<div>
3+
<h3>固定列</h3>
4+
<p>
5+
左右固定列
6+
<a
7+
href="https://github.com/tm-fe/FlexTable/blob/master/examples/features/fixedLeft.vue"
8+
>source code</a
9+
>
10+
</p>
11+
<div @click="click">切换</div>
12+
<flex-table
13+
v-show="show"
14+
:loading="loading"
15+
:columns="columnsData"
16+
:data="list"
17+
:sum="sum"
18+
:fixed-head="true"
19+
@on-sort-change="onSortChange"
20+
>
21+
<template slot-scope="{ row, index }" slot="img">
22+
<div style="padding: 15px 20px">
23+
<img :src="getImg" />
24+
</div>
25+
</template>
26+
</flex-table>
27+
</div>
28+
</template>
29+
<script>
30+
// import flexTable from '../../index.js';
31+
import imgSrc from './123.png';
32+
const aTestList = [];
33+
for (let i = 0; i < 5; i++) {
34+
const oTestData = {
35+
name: 'John Brown',
36+
age: 18,
37+
hegith: '178',
38+
address: 'New York No. 1 Lake Park',
39+
// address: 'New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake Park',
40+
date: '2016-10-03',
41+
_disabled: false,
42+
_isChecked: true,
43+
};
44+
aTestList.push(oTestData);
45+
}
46+
console.time('fixed');
47+
export default {
48+
// components:{
49+
// flexTable
50+
// },
51+
data() {
52+
return {
53+
getImg: '123',
54+
columnsData: [],
55+
columns: [
56+
{
57+
type: 'selection',
58+
width: 20,
59+
align: 'center',
60+
fixed: 'left',
61+
},
62+
{
63+
title: 'img',
64+
key: 'img',
65+
width: 200,
66+
fixed: 'left',
67+
sortable: true,
68+
type: 'slot',
69+
},
70+
{
71+
title: 'Name',
72+
key: 'name',
73+
width: 100,
74+
fixed: 'left',
75+
sortable: true,
76+
},
77+
{
78+
title: 'Height',
79+
key: 'hegith',
80+
width: 300,
81+
fixed: 'left'
82+
},
83+
{
84+
title: 'Address',
85+
key: 'address',
86+
width: 500,
87+
},
88+
{
89+
title: 'Date',
90+
key: 'date',
91+
width: 200,
92+
sortable: true,
93+
},
94+
],
95+
loading: false,
96+
list: [],
97+
sum: {
98+
name: 'Jim Green',
99+
age: 24,
100+
hegith: '-',
101+
address: 'London',
102+
date: '2016-10-01',
103+
},
104+
show: true,
105+
};
106+
},
107+
mounted() {
108+
console.timeEnd('fixed');
109+
this.columnsData = this.columns;
110+
this.loading = true;
111+
setTimeout(() => {
112+
this.loading = false;
113+
this.list = aTestList;
114+
this.getImg = imgSrc;
115+
}, 2000);
116+
},
117+
methods: {
118+
onSortChange(obj) {
119+
console.log(obj);
120+
},
121+
click() {
122+
this.show = !this.show;
123+
},
124+
},
125+
};
126+
</script>

‎examples/features/fixedLeft2.vue‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<template>
2+
<div>
3+
<h3>固定列</h3>
4+
<p>
5+
左右固定列
6+
<a
7+
href="https://github.com/tm-fe/FlexTable/blob/master/examples/features/fixedLeft.vue"
8+
>source code</a
9+
>
10+
</p>
11+
<div @click="click">切换</div>
12+
<flex-table
13+
v-if="show"
14+
:loading="loading"
15+
:columns="columnsData"
16+
:data="list"
17+
:sum="sum"
18+
:fixed-head="true"
19+
@on-sort-change="onSortChange"
20+
@hook:mounted="mountedHook"
21+
@hook:updated="updateHook"
22+
@hook:beforeDestroy="beforeDestroy"
23+
>
24+
<template slot-scope="{ row, index }" slot="img">
25+
<div style="padding: 15px 20px">
26+
<img :src="getImg" />
27+
</div>
28+
</template>
29+
</flex-table>
30+
</div>
31+
</template>
32+
<script>
33+
// import flexTable from '../../index.js';
34+
import imgSrc from './123.png';
35+
const aTestList = [];
36+
for (let i = 0; i < 5; i++) {
37+
const oTestData = {
38+
name: 'John Brown',
39+
age: 18,
40+
hegith: '178',
41+
address: 'New York No. 1 Lake Park',
42+
// address: 'New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake New York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake ParkNew York No. 1 Lake Park',
43+
date: '2016-10-03',
44+
_disabled: false,
45+
_isChecked: true,
46+
};
47+
aTestList.push(oTestData);
48+
}
49+
console.time('fixed');
50+
export default {
51+
// components:{
52+
// flexTable
53+
// },
54+
data() {
55+
return {
56+
getImg: '123',
57+
columnsData: [],
58+
columns: [
59+
{
60+
type: 'selection',
61+
width: 20,
62+
align: 'center',
63+
fixed: 'left',
64+
},
65+
{
66+
title: 'img',
67+
key: 'img',
68+
width: 200,
69+
fixed: 'left',
70+
sortable: true,
71+
type: 'slot',
72+
},
73+
{
74+
title: 'Name',
75+
key: 'name',
76+
width: 100,
77+
fixed: 'left',
78+
sortable: true,
79+
},
80+
{
81+
title: 'Height',
82+
key: 'hegith',
83+
width: 300,
84+
fixed: 'left'
85+
},
86+
{
87+
title: 'Address',
88+
key: 'address',
89+
width: 500,
90+
},
91+
{
92+
title: 'Date',
93+
key: 'date',
94+
width: 200,
95+
sortable: true,
96+
},
97+
],
98+
loading: false,
99+
list: [],
100+
sum: {
101+
name: 'Jim Green',
102+
age: 24,
103+
hegith: '-',
104+
address: 'London',
105+
date: '2016-10-01',
106+
},
107+
show: true,
108+
};
109+
},
110+
mounted() {
111+
console.timeEnd('fixed');
112+
this.columnsData = this.columns;
113+
this.loading = true;
114+
setTimeout(() => {
115+
this.loading = false;
116+
this.list = aTestList;
117+
this.getImg = imgSrc;
118+
}, 2000);
119+
},
120+
methods: {
121+
onSortChange(obj) {
122+
console.log(obj);
123+
},
124+
click() {
125+
this.show = !this.show;
126+
},
127+
mountedHook(){
128+
console.log('mounted了')
129+
},
130+
updateHook(){
131+
console.log('update了')
132+
},
133+
beforeDestroy(){
134+
console.log('destroy了')
135+
}
136+
},
137+
};
138+
</script>

‎examples/routes.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,14 @@ export default [
6363
title: '固定列',
6464
},
6565
},
66+
{
67+
path: '/fixedLeft1',
68+
name: 'fixedLeft1',
69+
component: resolve => require(['./features/fixedLeft1.vue'], resolve),
70+
meta: {
71+
title: '固定列',
72+
},
73+
},
6674
{
6775
path: '/resizable',
6876
name: 'resizable',

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "tm-flextable",
3-
"version": "0.7.3",
3+
"version": "0.7.4",
44
"description": "Using div to implement flexible、high performance table",
55
"main": "dist/index.js",
66
"typings": "types/index.d.ts",

‎src/tableTr.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
ref="tableTd"
55
class="flex-table-row"
66
:class="{ 'flex-table-hover': isHover }"
7-
:style="{ height: height }"
7+
:style="{ minHeight: height }"
88
@mouseenter="mouseenter"
99
>
1010
<table-td

0 commit comments

Comments
 (0)