update Table selection style, close #3159
This commit is contained in:
梁灏
parent
b63b02ddb8
commit
fc3e16cf01
4 changed files with 44 additions and 250 deletions
|
|
@ -1,280 +1,65 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Table :columns="columns8" :data="data7" size="small" ref="table"></Table>
|
<Table border ref="selection" :columns="columns4" :data="data1"></Table>
|
||||||
<br>
|
<br><br>
|
||||||
<Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> Export source data</Button>
|
<Button @click="handleSelectAll(true)">Set all selected</Button>
|
||||||
<Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> Export sorting and filtered data</Button>
|
<Button @click="handleSelectAll(false)">Cancel all selected</Button>
|
||||||
<Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> Export custom data</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
columns8: [
|
columns4: [
|
||||||
{
|
{
|
||||||
"title": "Name",
|
type: 'selection',
|
||||||
"key": "name",
|
width: 60,
|
||||||
"fixed": "left",
|
align: 'center'
|
||||||
"width": 200
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Show",
|
title: 'Name',
|
||||||
"key": "show",
|
key: 'name'
|
||||||
"width": 150,
|
|
||||||
"sortable": true,
|
|
||||||
filters: [
|
|
||||||
{
|
|
||||||
label: 'Greater than 4000',
|
|
||||||
value: 1
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Less than 4000',
|
title: 'Age',
|
||||||
value: 2
|
key: 'age'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Address',
|
||||||
|
key: 'address'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
filterMultiple: false,
|
data1: [
|
||||||
filterMethod (value, row) {
|
{
|
||||||
if (value === 1) {
|
name: 'John Brown',
|
||||||
return row.show > 4000;
|
age: 18,
|
||||||
} else if (value === 2) {
|
address: 'New York No. 1 Lake Park',
|
||||||
return row.show < 4000;
|
date: '2016-10-03'
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Weak",
|
name: 'Jim Green',
|
||||||
"key": "weak",
|
age: 24,
|
||||||
"width": 150,
|
address: 'London No. 1 Lake Park',
|
||||||
"sortable": true
|
date: '2016-10-01'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Signin",
|
name: 'Joe Black',
|
||||||
"key": "signin",
|
age: 30,
|
||||||
"width": 150,
|
address: 'Sydney No. 1 Lake Park',
|
||||||
"sortable": true
|
date: '2016-10-02'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Click",
|
name: 'Jon Snow',
|
||||||
"key": "click",
|
age: 26,
|
||||||
"width": 150,
|
address: 'Ottawa No. 2 Lake Park',
|
||||||
"sortable": true
|
date: '2016-10-04'
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Active",
|
|
||||||
"key": "active",
|
|
||||||
"width": 150,
|
|
||||||
"sortable": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "7, retained",
|
|
||||||
"key": "day7",
|
|
||||||
"width": 150,
|
|
||||||
"sortable": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "30, retained",
|
|
||||||
"key": "day30",
|
|
||||||
"width": 150,
|
|
||||||
"sortable": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "The next day left",
|
|
||||||
"key": "tomorrow",
|
|
||||||
"width": 150,
|
|
||||||
"sortable": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Day Active",
|
|
||||||
"key": "day",
|
|
||||||
"width": 150,
|
|
||||||
"sortable": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Week Active",
|
|
||||||
"key": "week",
|
|
||||||
"width": 150,
|
|
||||||
"sortable": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Month Active",
|
|
||||||
"key": "month",
|
|
||||||
"width": 150,
|
|
||||||
"sortable": true
|
|
||||||
}
|
|
||||||
],
|
|
||||||
data7: [
|
|
||||||
{
|
|
||||||
"name": "Name1",
|
|
||||||
"fav": 0,
|
|
||||||
"show": 7302,
|
|
||||||
"weak": 5627,
|
|
||||||
"signin": 1563,
|
|
||||||
"click": 4254,
|
|
||||||
"active": 1438,
|
|
||||||
"day7": 274,
|
|
||||||
"day30": 285,
|
|
||||||
"tomorrow": 1727,
|
|
||||||
"day": 558,
|
|
||||||
"week": 4440,
|
|
||||||
"month": 5610
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Name2",
|
|
||||||
"fav": 0,
|
|
||||||
"show": 4720,
|
|
||||||
"weak": 4086,
|
|
||||||
"signin": 3792,
|
|
||||||
"click": 8690,
|
|
||||||
"active": 8470,
|
|
||||||
"day7": 8172,
|
|
||||||
"day30": 5197,
|
|
||||||
"tomorrow": 1684,
|
|
||||||
"day": 2593,
|
|
||||||
"week": 2507,
|
|
||||||
"month": 1537
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Name3",
|
|
||||||
"fav": 0,
|
|
||||||
"show": 7181,
|
|
||||||
"weak": 8007,
|
|
||||||
"signin": 8477,
|
|
||||||
"click": 1879,
|
|
||||||
"active": 16,
|
|
||||||
"day7": 2249,
|
|
||||||
"day30": 3450,
|
|
||||||
"tomorrow": 377,
|
|
||||||
"day": 1561,
|
|
||||||
"week": 3219,
|
|
||||||
"month": 1588
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Name4",
|
|
||||||
"fav": 0,
|
|
||||||
"show": 9911,
|
|
||||||
"weak": 8976,
|
|
||||||
"signin": 8807,
|
|
||||||
"click": 8050,
|
|
||||||
"active": 7668,
|
|
||||||
"day7": 1547,
|
|
||||||
"day30": 2357,
|
|
||||||
"tomorrow": 7278,
|
|
||||||
"day": 5309,
|
|
||||||
"week": 1655,
|
|
||||||
"month": 9043
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Name5",
|
|
||||||
"fav": 0,
|
|
||||||
"show": 934,
|
|
||||||
"weak": 1394,
|
|
||||||
"signin": 6463,
|
|
||||||
"click": 5278,
|
|
||||||
"active": 9256,
|
|
||||||
"day7": 209,
|
|
||||||
"day30": 3563,
|
|
||||||
"tomorrow": 8285,
|
|
||||||
"day": 1230,
|
|
||||||
"week": 4840,
|
|
||||||
"month": 9908
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Name6",
|
|
||||||
"fav": 0,
|
|
||||||
"show": 6856,
|
|
||||||
"weak": 1608,
|
|
||||||
"signin": 457,
|
|
||||||
"click": 4949,
|
|
||||||
"active": 2909,
|
|
||||||
"day7": 4525,
|
|
||||||
"day30": 6171,
|
|
||||||
"tomorrow": 1920,
|
|
||||||
"day": 1966,
|
|
||||||
"week": 904,
|
|
||||||
"month": 6851
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Name7",
|
|
||||||
"fav": 0,
|
|
||||||
"show": 5107,
|
|
||||||
"weak": 6407,
|
|
||||||
"signin": 4166,
|
|
||||||
"click": 7970,
|
|
||||||
"active": 1002,
|
|
||||||
"day7": 8701,
|
|
||||||
"day30": 9040,
|
|
||||||
"tomorrow": 7632,
|
|
||||||
"day": 4061,
|
|
||||||
"week": 4359,
|
|
||||||
"month": 3676
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Name8",
|
|
||||||
"fav": 0,
|
|
||||||
"show": 862,
|
|
||||||
"weak": 6520,
|
|
||||||
"signin": 6696,
|
|
||||||
"click": 3209,
|
|
||||||
"active": 6801,
|
|
||||||
"day7": 6364,
|
|
||||||
"day30": 6850,
|
|
||||||
"tomorrow": 9408,
|
|
||||||
"day": 2481,
|
|
||||||
"week": 1479,
|
|
||||||
"month": 2346
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Name9",
|
|
||||||
"fav": 0,
|
|
||||||
"show": 567,
|
|
||||||
"weak": 5859,
|
|
||||||
"signin": 128,
|
|
||||||
"click": 6593,
|
|
||||||
"active": 1971,
|
|
||||||
"day7": 7596,
|
|
||||||
"day30": 3546,
|
|
||||||
"tomorrow": 6641,
|
|
||||||
"day": 1611,
|
|
||||||
"week": 5534,
|
|
||||||
"month": 3190
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Name10",
|
|
||||||
"fav": 0,
|
|
||||||
"show": 3651,
|
|
||||||
"weak": 1819,
|
|
||||||
"signin": 4595,
|
|
||||||
"click": 7499,
|
|
||||||
"active": 7405,
|
|
||||||
"day7": 8710,
|
|
||||||
"day30": 5518,
|
|
||||||
"tomorrow": 428,
|
|
||||||
"day": 9768,
|
|
||||||
"week": 2864,
|
|
||||||
"month": 5811
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
exportData (type) {
|
handleSelectAll (status) {
|
||||||
if (type === 1) {
|
this.$refs.selection.selectAll(status);
|
||||||
this.$refs.table.exportCsv({
|
|
||||||
filename: 'The original data'
|
|
||||||
});
|
|
||||||
} else if (type === 2) {
|
|
||||||
this.$refs.table.exportCsv({
|
|
||||||
filename: 'Sorting and filtering data',
|
|
||||||
original: false
|
|
||||||
});
|
|
||||||
} else if (type === 3) {
|
|
||||||
this.$refs.table.exportCsv({
|
|
||||||
filename: 'Custom data',
|
|
||||||
columns: this.columns8.filter((col, index) => index < 4),
|
|
||||||
data: this.data7.filter((data, index) => index < 4)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -55,7 +55,8 @@
|
||||||
{
|
{
|
||||||
[`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'),
|
[`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'),
|
||||||
[`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false,
|
[`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false,
|
||||||
[`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand'
|
[`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand',
|
||||||
|
[`${this.prefixCls}-cell-with-selection`]: this.renderType === 'selection'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -128,7 +128,8 @@
|
||||||
return [
|
return [
|
||||||
`${this.prefixCls}-cell`,
|
`${this.prefixCls}-cell`,
|
||||||
{
|
{
|
||||||
[`${this.prefixCls}-hidden`]: !this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right')
|
[`${this.prefixCls}-hidden`]: !this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right'),
|
||||||
|
[`${this.prefixCls}-cell-with-selection`]: column.type === 'selection'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -179,6 +179,13 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// #3159
|
||||||
|
&-with-selection{
|
||||||
|
.@{checkbox-prefix-cls}-wrapper{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&-hidden{
|
&-hidden{
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue