Skip to content

Commit dbf9638

Browse files
PanJiaChenPanJiaChen
committed
refine dynamictable example
1 parent aaa64a8 commit dbf9638

File tree

3 files changed

+121
-28
lines changed

3 files changed

+121
-28
lines changed

‎src/views/example/table/dynamictable.vue

Lines changed: 9 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,19 @@
11
<template>
22
<div class="app-container">
3-
<div class="filter-container">
4-
<el-checkbox-group v-model="formThead">
5-
<el-checkbox label="apple">apple</el-checkbox>
6-
<el-checkbox label="banana">banana</el-checkbox>
7-
<el-checkbox label="orange">orange</el-checkbox>
8-
</el-checkbox-group>
9-
</div>
10-
<el-table :data="tableData" style="width: 100%">
11-
<el-table-column prop="name" label="名称" width="180">
12-
</el-table-column>
13-
<el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit">
14-
<template scope="scope">
15-
{{scope.row.list[index].value}}
16-
</template>
17-
</el-table-column>
18-
</el-table>
3+
<div style='margin:0 0 5px 20px'>固定表头 按照表头顺序排序</div>
4+
<fixed-thead/>
5+
6+
<div style='margin:30px 0 5px 20px'>不固定表头 按照点击顺序排序</div>
7+
<unfixed-thead/>
198
</div>
209
</template>
2110

2211
<script>
12+
import fixedThead from './dynamictable/fixedThead'
13+
import unfixedThead from './dynamictable/unfixedThead'
14+
2315
export default {
24-
data() {
25-
return {
26-
tableData: [{
27-
name: '水果',
28-
list: [{ name: 'apple', value: 10 }, { name: 'banana', value: 20 }, { name: 'orange', value: 20 }]
29-
}, {
30-
name: '水果2',
31-
list: [{ name: 'apple2', value: 12 }, { name: 'banana2', value: 22 }, { name: 'orange', value: 20 }]
32-
}],
33-
formThead: ['apple', 'banana']
34-
}
35-
}
16+
components: { fixedThead, unfixedThead }
3617
};
3718
</script>
3819

‎src/views/example/table/dynamictable/fixedThead.vue

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<div class="app-container">
3+
4+
<div class="filter-container">
5+
<el-checkbox-group v-model="checkboxVal" >
6+
<el-checkbox label="apple">apple</el-checkbox>
7+
<el-checkbox label="banana">banana</el-checkbox>
8+
<el-checkbox label="orange">orange</el-checkbox>
9+
</el-checkbox-group>
10+
</div>
11+
12+
<el-table :data="tableData" :key='key' style="width: 100%">
13+
<el-table-column prop="name" label="fruitName" width="180"></el-table-column>
14+
<el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit">
15+
<template scope="scope">
16+
{{scope.row.list[index].value}}
17+
</template>
18+
</el-table-column>
19+
</el-table>
20+
21+
</div>
22+
</template>
23+
24+
<script>
25+
const defaultFormThead = ['apple', 'banana']; // 默认选中项
26+
export default {
27+
data() {
28+
return {
29+
tableData: [
30+
{
31+
name: 'fruit1',
32+
list: [
33+
{ name: 'apple1', value: 10 },
34+
{ name: 'banana1', value: 20 },
35+
{ name: 'orange1', value: 20 }
36+
]
37+
},
38+
{
39+
name: 'fruit2',
40+
list: [
41+
{ name: 'apple2', value: 12 },
42+
{ name: 'banana2', value: 22 },
43+
{ name: 'orange2', value: 20 }
44+
]
45+
}
46+
],
47+
key: 1, // table key
48+
formTheadOptions: ['apple', 'banana', 'orange'], // 可选择表头
49+
checkboxVal: defaultFormThead, // checkboxVal
50+
formThead: defaultFormThead // 默认表头
51+
}
52+
},
53+
watch: {
54+
checkboxVal(valArr) {
55+
this.formThead = this.formTheadOptions.filter(i => valArr.indexOf(i) >= 0);
56+
this.key = this.key + 1;// 为了保证table 每次都会重渲 （牺牲性能保证效果，当然也可以不用）
57+
}
58+
}
59+
};
60+
</script>
61+

‎src/views/example/table/dynamictable/unfixedThead.vue

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<div class="app-container">
3+
4+
<div class="filter-container">
5+
<el-checkbox-group v-model="formThead">
6+
<el-checkbox label="apple">apple</el-checkbox>
7+
<el-checkbox label="banana">banana</el-checkbox>
8+
<el-checkbox label="orange">orange</el-checkbox>
9+
</el-checkbox-group>
10+
</div>
11+
12+
<el-table :data="tableData" style="width: 100%">
13+
<el-table-column prop="name" label="fruitName" width="180">
14+
</el-table-column>
15+
<el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit">
16+
<template scope="scope">
17+
{{scope.row.list[index].value}}
18+
</template>
19+
</el-table-column>
20+
</el-table>
21+
22+
</div>
23+
</template>
24+
25+
<script>
26+
export default {
27+
data() {
28+
return {
29+
tableData: [
30+
{
31+
name: 'fruit1',
32+
list: [
33+
{ name: 'apple1', value: 10 },
34+
{ name: 'banana1', value: 20 },
35+
{ name: 'orange1', value: 20 }
36+
]
37+
},
38+
{
39+
name: 'fruit2',
40+
list: [
41+
{ name: 'apple2', value: 12 },
42+
{ name: 'banana2', value: 22 },
43+
{ name: 'orange2', value: 20 }
44+
]
45+
}
46+
],
47+
formThead: ['apple', 'banana']
48+
}
49+
}
50+
};
51+
</script>

0 commit comments

Comments
 (0)