drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Table sort style

Browse source
This commit is contained in:
梁灏 2018-06-25 20:21:01 +08:00
parent 5f6e94bdad
commit a000231ec2
2 changed files with 33 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

157
examples/routers/table.vue
View file

@ -1,150 +1,57 @@
<template>
<div>
<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>
<Table border :columns="columns5" :data="data5"></Table>
</template>
<script>
export default {
data () {
return {
tableData1: this.mockTableData1(),
tableColumns1: [
columns5: [
{
title: 'Date',
key: 'date',
sortable: true
},
{
title: 'Name',
key: 'name'
},
{
title: 'Status',
key: 'status',
render: (h, params) => {
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: 'Age',
key: 'age',
sortable: true
},
{
title: 'Portrayal',
key: 'portrayal',
render: (h, params) => {
return h('Poptip', {
props: {
trigger: 'hover',
title: params.row.portrayal.length + 'portrayals',
placement: 'bottom'
}
}, [
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: 'Address',
key: 'address'
}
],
data5: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
title: 'People',
key: 'people',
render: (h, params) => {
return h('Poptip', {
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')
}))
])
]);
}
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
title: 'Sampling Time',
key: 'time',
render: (h, params) => {
return h('div', 'Almost' + params.row.time + 'days');
}
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
title: 'Updated Time',
key: 'update',
render: (h, params) => {
return h('div', this.formatDate(this.tableData1[params.index].update));
}
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
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>

3
src/styles/mixins/caret.less
View file

@ -1,9 +1,8 @@
// sortable
.sortable() {
display: inline-block;
width: 9px;
width: 14px;
height: 12px;
margin-left: 4px;
margin-top: -1px;
vertical-align: middle;
overflow: hidden;