update Table sort style
This commit is contained in:
梁灏
parent
5f6e94bdad
commit
a000231ec2
2 changed files with 33 additions and 127 deletions
|
|
@ -1,150 +1,57 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<Table border :columns="columns5" :data="data5"></Table>
|
||||||
<Table :data="tableData1" :columns="tableColumns1" stripe></Table>
|
|
||||||
<div style="margin: 10px;overflow: hidden">
|
|
||||||
<div style="float: right;">
|
|
||||||
<Page :total="100" :current="1" @on-change="changePage"></Page>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
tableData1: this.mockTableData1(),
|
columns5: [
|
||||||
tableColumns1: [
|
{
|
||||||
|
title: 'Date',
|
||||||
|
key: 'date',
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: 'Name',
|
title: 'Name',
|
||||||
key: 'name'
|
key: 'name'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Status',
|
title: 'Age',
|
||||||
key: 'status',
|
key: 'age',
|
||||||
render: (h, params) => {
|
sortable: true
|
||||||
const row = params.row;
|
|
||||||
const color = row.status === 1 ? 'blue' : row.status === 2 ? 'green' : 'red';
|
|
||||||
const text = row.status === 1 ? 'Working' : row.status === 2 ? 'Success' : 'Fail';
|
|
||||||
|
|
||||||
return h('Tag', {
|
|
||||||
props: {
|
|
||||||
type: 'dot',
|
|
||||||
color: color
|
|
||||||
}
|
|
||||||
}, text);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Portrayal',
|
title: 'Address',
|
||||||
key: 'portrayal',
|
key: 'address'
|
||||||
render: (h, params) => {
|
}
|
||||||
return h('Poptip', {
|
],
|
||||||
props: {
|
data5: [
|
||||||
trigger: 'hover',
|
{
|
||||||
title: params.row.portrayal.length + 'portrayals',
|
name: 'John Brown',
|
||||||
placement: 'bottom'
|
age: 18,
|
||||||
}
|
address: 'New York No. 1 Lake Park',
|
||||||
}, [
|
date: '2016-10-03'
|
||||||
h('Tag', params.row.portrayal.length),
|
|
||||||
h('div', {
|
|
||||||
slot: 'content'
|
|
||||||
}, [
|
|
||||||
h('ul', this.tableData1[params.index].portrayal.map(item => {
|
|
||||||
return h('li', {
|
|
||||||
style: {
|
|
||||||
textAlign: 'center',
|
|
||||||
padding: '4px'
|
|
||||||
}
|
|
||||||
}, item)
|
|
||||||
}))
|
|
||||||
])
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'People',
|
name: 'Jim Green',
|
||||||
key: 'people',
|
age: 24,
|
||||||
render: (h, params) => {
|
address: 'London No. 1 Lake Park',
|
||||||
return h('Poptip', {
|
date: '2016-10-01'
|
||||||
props: {
|
|
||||||
trigger: 'hover',
|
|
||||||
title: params.row.people.length + 'customers',
|
|
||||||
placement: 'bottom'
|
|
||||||
}
|
|
||||||
}, [
|
|
||||||
h('Tag', params.row.people.length),
|
|
||||||
h('div', {
|
|
||||||
slot: 'content'
|
|
||||||
}, [
|
|
||||||
h('ul', this.tableData1[params.index].people.map(item => {
|
|
||||||
return h('li', {
|
|
||||||
style: {
|
|
||||||
textAlign: 'center',
|
|
||||||
padding: '4px'
|
|
||||||
}
|
|
||||||
}, item.n + '：' + item.c + 'People')
|
|
||||||
}))
|
|
||||||
])
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Sampling Time',
|
name: 'Joe Black',
|
||||||
key: 'time',
|
age: 30,
|
||||||
render: (h, params) => {
|
address: 'Sydney No. 1 Lake Park',
|
||||||
return h('div', 'Almost' + params.row.time + 'days');
|
date: '2016-10-02'
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Updated Time',
|
name: 'Jon Snow',
|
||||||
key: 'update',
|
age: 26,
|
||||||
render: (h, params) => {
|
address: 'Ottawa No. 2 Lake Park',
|
||||||
return h('div', this.formatDate(this.tableData1[params.index].update));
|
date: '2016-10-04'
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mockTableData1 () {
|
|
||||||
let data = [];
|
|
||||||
for (let i = 0; i < 10; i++) {
|
|
||||||
data.push({
|
|
||||||
name: 'Business' + Math.floor(Math.random () * 100 + 1),
|
|
||||||
status: Math.floor(Math.random () * 3 + 1),
|
|
||||||
portrayal: ['City', 'People', 'Cost', 'Life', 'Entertainment'],
|
|
||||||
people: [
|
|
||||||
{
|
|
||||||
n: 'People' + Math.floor(Math.random () * 100 + 1),
|
|
||||||
c: Math.floor(Math.random () * 1000000 + 100000)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
n: 'People' + Math.floor(Math.random () * 100 + 1),
|
|
||||||
c: Math.floor(Math.random () * 1000000 + 100000)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
n: 'People' + Math.floor(Math.random () * 100 + 1),
|
|
||||||
c: Math.floor(Math.random () * 1000000 + 100000)
|
|
||||||
}
|
|
||||||
],
|
|
||||||
time: Math.floor(Math.random () * 7 + 1),
|
|
||||||
update: new Date()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
},
|
|
||||||
formatDate (date) {
|
|
||||||
const y = date.getFullYear();
|
|
||||||
let m = date.getMonth() + 1;
|
|
||||||
m = m < 10 ? '0' + m : m;
|
|
||||||
let d = date.getDate();
|
|
||||||
d = d < 10 ? ('0' + d) : d;
|
|
||||||
return y + '-' + m + '-' + d;
|
|
||||||
},
|
|
||||||
changePage () {
|
|
||||||
// The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
|
|
||||||
this.tableData1 = this.mockTableData1();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,8 @@
|
||||||
// sortable
|
// sortable
|
||||||
.sortable() {
|
.sortable() {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 9px;
|
width: 14px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
margin-left: 4px;
|
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue