update Table Icons
This commit is contained in:
梁灏
parent
fdcb8143be
commit
021bbec2c3
4 changed files with 123 additions and 503 deletions
|
|
@ -1,76 +1,10 @@
|
||||||
<style>
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- <br><br><br><br><br> -->
|
<Table :data="tableData1" :columns="tableColumns1" stripe></Table>
|
||||||
<!-- <Table border :show-header='false' :columns="columns1" height="500" :data="data1"></Table> -->
|
<div style="margin: 10px;overflow: hidden">
|
||||||
<!-- <Table border :columns="columns1" height='300'></Table> -->
|
<div style="float: right;">
|
||||||
<!-- <br><br><br><br><br> -->
|
<Page :total="100" :current="1" @on-change="changePage"></Page>
|
||||||
<!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> -->
|
</div>
|
||||||
<!--<br><br><br><br><br>-->
|
|
||||||
<!-- <Table border :columns="columns5" height="240" :data="data5"></Table> -->
|
|
||||||
<!-- <br><br><br><br><br> -->
|
|
||||||
<!-- <Table border :columns="columns6" :data="data5"></Table> -->
|
|
||||||
<!-- <br><br><br><br><br> -->
|
|
||||||
<!-- <Table border :show-header='false' :columns="columns7" height="200" :data="data7"></Table> -->
|
|
||||||
<!-- <Table border :columns="columns7" height="240" :data="data7"></Table> -->
|
|
||||||
<!-- <br><br><br><br><br> -->
|
|
||||||
<!-- <Table border :columns="columns8" :data="data7" height="200"></Table> -->
|
|
||||||
<!-- <Table border :columns="columns8" height="200"></Table> -->
|
|
||||||
<!-- <br><br><br><br><br> -->
|
|
||||||
|
|
||||||
<div class="layout-demo-con">
|
|
||||||
<Button @click="change">修改Sider绑定的变量来控制收缩</Button>
|
|
||||||
<Layout :style="{minHeight: '80vh'}">
|
|
||||||
<Sider
|
|
||||||
v-model="isCollapsed"
|
|
||||||
collapsed-width="0"
|
|
||||||
hide-trigger
|
|
||||||
breakpoint="sm"
|
|
||||||
@on-collapse="changed"
|
|
||||||
collapsible
|
|
||||||
ref="side"
|
|
||||||
width="200">
|
|
||||||
<Menu width="auto" theme="dark" active-name="1">
|
|
||||||
<MenuGroup title="内容管理">
|
|
||||||
<MenuItem name="1">
|
|
||||||
<Icon type="document-text"></Icon>
|
|
||||||
文章管理
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem name="2">
|
|
||||||
<Icon type="chatbubbles"></Icon>
|
|
||||||
评论管理
|
|
||||||
</MenuItem>
|
|
||||||
</MenuGroup>
|
|
||||||
<MenuGroup title="统计分析">
|
|
||||||
<MenuItem name="3">
|
|
||||||
<Icon type="heart"></Icon>
|
|
||||||
用户留存
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem name="4">
|
|
||||||
<Icon type="heart-broken"></Icon>
|
|
||||||
流失用户
|
|
||||||
</MenuItem>
|
|
||||||
</MenuGroup>
|
|
||||||
</Menu>
|
|
||||||
<!-- <div slot="trigger"><Icon type="document-text"></Icon></div> -->
|
|
||||||
</Sider>
|
|
||||||
<Layout class-name="test-class">
|
|
||||||
<Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
|
|
||||||
<Content :style="{background:'#FFCF9E'}">
|
|
||||||
<!-- <Table border :columns="columns1" height="500" :data="data1"></Table> -->
|
|
||||||
<!-- <br> -->
|
|
||||||
<!-- <Table border :columns="columns5" :data="data5"></Table> -->
|
|
||||||
<Table border :columns="columns8" height="240" :data="data7"></Table>
|
|
||||||
</Content>
|
|
||||||
<Footer>sdfsdsdfsdfs</Footer>
|
|
||||||
</Layout>
|
|
||||||
</Layout>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -78,453 +12,138 @@ table {
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
isCollapsed: false,
|
tableData1: this.mockTableData1(),
|
||||||
columns1: [
|
tableColumns1: [
|
||||||
{
|
{
|
||||||
title: 'Name',
|
title: 'Name',
|
||||||
key: 'name',
|
key: 'name'
|
||||||
align: 'center',
|
|
||||||
minWidth: 100,
|
|
||||||
maxWidth: 200,
|
|
||||||
fixed: 'left',
|
|
||||||
filters: [
|
|
||||||
{
|
|
||||||
label: 'Joe',
|
|
||||||
value: 1
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'John',
|
title: 'Status',
|
||||||
value: 2
|
key: 'status',
|
||||||
}
|
|
||||||
],
|
|
||||||
filterMultiple: false,
|
|
||||||
filterMethod (value, row) {
|
|
||||||
if (value === 1) {
|
|
||||||
return row.name === 'Joe';
|
|
||||||
} else if (value === 2) {
|
|
||||||
return row.name === 'John Brown';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Other',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: 'Age',
|
|
||||||
key: 'age',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 100,
|
|
||||||
maxWidth: 200,
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Address',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: 'Street',
|
|
||||||
key: 'street',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 100,
|
|
||||||
maxWidth: 200,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Block',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: 'Building',
|
|
||||||
key: 'building',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 100,
|
|
||||||
maxWidth: 200,
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Door No.',
|
|
||||||
key: 'door',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 100,
|
|
||||||
maxWidth: 200,
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Company',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: 'Company Address',
|
|
||||||
key: 'caddress',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 100,
|
|
||||||
maxWidth: 200,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Company Name',
|
|
||||||
key: 'cname',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 100,
|
|
||||||
maxWidth: 200,
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// title: 'Gender',
|
|
||||||
// key: 'gender',
|
|
||||||
// align: 'center',
|
|
||||||
// width: 200,
|
|
||||||
// fixed: 'right'
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
title: 'Gender',
|
|
||||||
key: 'gender',
|
|
||||||
align: 'center',
|
|
||||||
minWidth: 100,
|
|
||||||
maxWidth: 200,
|
|
||||||
fixed: 'right'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
columns2: [
|
|
||||||
{
|
|
||||||
title: 'Name',
|
|
||||||
key: 'name',
|
|
||||||
width: 100,
|
|
||||||
fixed: 'left'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Age',
|
|
||||||
key: 'age',
|
|
||||||
width: 100,
|
|
||||||
fixed: 'right',
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Province',
|
|
||||||
key: 'province',
|
|
||||||
width: 100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'City',
|
|
||||||
key: 'city',
|
|
||||||
width: 100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Address',
|
|
||||||
key: 'address',
|
|
||||||
width: 200
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Postcode',
|
|
||||||
key: 'zip',
|
|
||||||
width: 100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Action',
|
|
||||||
key: 'action',
|
|
||||||
fixed: 'right',
|
|
||||||
width: 120,
|
|
||||||
render: (h, params) => {
|
render: (h, params) => {
|
||||||
return h('div', [
|
const row = params.row;
|
||||||
h('Button', {
|
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: {
|
props: {
|
||||||
type: 'text',
|
type: 'dot',
|
||||||
size: 'small'
|
color: color
|
||||||
}
|
}
|
||||||
}, 'View'),
|
}, text);
|
||||||
h('Button', {
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Portrayal',
|
||||||
|
key: 'portrayal',
|
||||||
|
render: (h, params) => {
|
||||||
|
return h('Poptip', {
|
||||||
props: {
|
props: {
|
||||||
type: 'text',
|
trigger: 'hover',
|
||||||
size: 'small'
|
title: params.row.portrayal.length + 'portrayals',
|
||||||
|
placement: 'bottom'
|
||||||
}
|
}
|
||||||
}, 'Edit')
|
}, [
|
||||||
|
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',
|
||||||
|
key: 'people',
|
||||||
|
render: (h, params) => {
|
||||||
|
return h('Poptip', {
|
||||||
|
props: {
|
||||||
|
trigger: 'hover',
|
||||||
|
title: params.row.people.length + 'customers',
|
||||||
|
placement: 'bottom'
|
||||||
}
|
}
|
||||||
],
|
}, [
|
||||||
data1: [],
|
h('Tag', params.row.people.length),
|
||||||
data4: [
|
h('div', {
|
||||||
{
|
slot: 'content'
|
||||||
name: 'John Brown',
|
}, [
|
||||||
age: 18,
|
h('ul', this.tableData1[params.index].people.map(item => {
|
||||||
address: 'New York No. 1 Lake Park',
|
return h('li', {
|
||||||
province: 'America',
|
style: {
|
||||||
city: 'New York',
|
textAlign: 'center',
|
||||||
zip: 100000
|
padding: '4px'
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jim Green',
|
|
||||||
age: 24,
|
|
||||||
address: 'Washington, D.C. No. 1 Lake Park',
|
|
||||||
province: 'America',
|
|
||||||
city: 'Washington, D.C.',
|
|
||||||
zip: 100000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Joe Black',
|
|
||||||
age: 30,
|
|
||||||
address: 'Sydney No. 1 Lake Park',
|
|
||||||
province: 'Australian',
|
|
||||||
city: 'Sydney',
|
|
||||||
zip: 100000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jon Snow',
|
|
||||||
age: 26,
|
|
||||||
address: 'Ottawa No. 2 Lake Park',
|
|
||||||
province: 'Canada',
|
|
||||||
city: 'Ottawa',
|
|
||||||
zip: 100000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'John Brown',
|
|
||||||
age: 18,
|
|
||||||
address: 'New York No. 1 Lake Park',
|
|
||||||
province: 'America',
|
|
||||||
city: 'New York',
|
|
||||||
zip: 100000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jim Green',
|
|
||||||
age: 24,
|
|
||||||
address: 'Washington, D.C. No. 1 Lake Park',
|
|
||||||
province: 'America',
|
|
||||||
city: 'Washington, D.C.',
|
|
||||||
zip: 100000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Joe Black',
|
|
||||||
age: 30,
|
|
||||||
address: 'Sydney No. 1 Lake Park',
|
|
||||||
province: 'Australian',
|
|
||||||
city: 'Sydney',
|
|
||||||
zip: 100000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jon Snow',
|
|
||||||
age: 26,
|
|
||||||
address: 'Ottawa No. 2 Lake Park',
|
|
||||||
province: 'Canada',
|
|
||||||
city: 'Ottawa',
|
|
||||||
zip: 100000
|
|
||||||
}
|
|
||||||
],
|
|
||||||
columns5: [
|
|
||||||
{
|
|
||||||
title: 'Date',
|
|
||||||
key: 'date',
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Name',
|
|
||||||
key: 'name'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Age',
|
|
||||||
key: 'age',
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Address',
|
|
||||||
key: 'address'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
data5: [
|
|
||||||
{
|
|
||||||
name: 'John Brown',
|
|
||||||
age: 18,
|
|
||||||
address: 'New York No. 1 Lake Park',
|
|
||||||
date: '2016-10-03'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jim Green',
|
|
||||||
age: 24,
|
|
||||||
address: 'London No. 1 Lake Park',
|
|
||||||
date: '2016-10-01'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Joe Black',
|
|
||||||
age: 30,
|
|
||||||
address: 'Sydney No. 1 Lake Park',
|
|
||||||
date: '2016-10-02'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jon Snow',
|
|
||||||
age: 26,
|
|
||||||
address: 'Ottawa No. 2 Lake Park',
|
|
||||||
date: '2016-10-04'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
columns6: [
|
|
||||||
{
|
|
||||||
title: 'Date',
|
|
||||||
key: 'date'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Name',
|
|
||||||
key: 'name'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Age',
|
|
||||||
key: 'age',
|
|
||||||
filters: [
|
|
||||||
{
|
|
||||||
label: 'Greater than 25',
|
|
||||||
value: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Less than 25',
|
|
||||||
value: 2
|
|
||||||
}
|
|
||||||
],
|
|
||||||
filterMultiple: false,
|
|
||||||
filterMethod (value, row) {
|
|
||||||
if (value === 1) {
|
|
||||||
return row.age > 25;
|
|
||||||
} else if (value === 2) {
|
|
||||||
return row.age < 25;
|
|
||||||
}
|
}
|
||||||
|
}, item.n + '：' + item.c + 'People')
|
||||||
|
}))
|
||||||
|
])
|
||||||
|
]);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Address',
|
title: 'Sampling Time',
|
||||||
key: 'address',
|
key: 'time',
|
||||||
fixed: 'right',
|
render: (h, params) => {
|
||||||
filters: [
|
return h('div', 'Almost' + params.row.time + 'days');
|
||||||
{
|
|
||||||
label: 'New York',
|
|
||||||
value: 'New York'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'London',
|
|
||||||
value: 'London'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Sydney',
|
|
||||||
value: 'Sydney'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
filterMethod (value, row) {
|
|
||||||
return row.address.indexOf(value) > -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
|
|
||||||
columns7: [
|
|
||||||
{
|
|
||||||
title: 'Date',
|
|
||||||
key: 'date',
|
|
||||||
sortable: true,
|
|
||||||
width:200,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Name',
|
|
||||||
key: 'name',
|
|
||||||
width:200,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Age',
|
|
||||||
key: 'age',
|
|
||||||
width:200,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Address',
|
|
||||||
key: 'address',
|
|
||||||
width:200,
|
|
||||||
}
|
|
||||||
],
|
|
||||||
data7: [
|
|
||||||
{
|
|
||||||
name: 'John Brown',
|
|
||||||
age: 18,
|
|
||||||
address: 'New York No. 1 Lake Park',
|
|
||||||
date: '2016-10-03'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jim Green',
|
|
||||||
age: 24,
|
|
||||||
address: 'London No. 1 Lake Park',
|
|
||||||
date: '2016-10-01'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Joe Black',
|
|
||||||
age: 30,
|
|
||||||
address: 'Sydney No. 1 Lake Park Sydney No. 1 Lake Park',
|
|
||||||
date: '2016-10-02'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jon Snow',
|
|
||||||
age: 26,
|
|
||||||
address: 'Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park',
|
|
||||||
date: '2016-10-04'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
|
|
||||||
columns8: [
|
|
||||||
{
|
|
||||||
title: 'Address',
|
|
||||||
key: 'address',
|
|
||||||
minWidth:200,
|
|
||||||
//maxWidth:300,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Date',
|
|
||||||
key: 'date',
|
|
||||||
sortable: true,
|
|
||||||
minWidth:100,
|
|
||||||
maxWidth:150,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Name',
|
|
||||||
key: 'name',
|
|
||||||
minWidth:100,
|
|
||||||
maxWidth:200,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Age',
|
|
||||||
key: 'age',
|
|
||||||
minWidth:60,
|
|
||||||
maxWidth:100,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
{
|
||||||
const data = [];
|
title: 'Updated Time',
|
||||||
for (let i = 0; i < 20; i++) {
|
key: 'update',
|
||||||
data.push({
|
render: (h, params) => {
|
||||||
key: i,
|
return h('div', this.formatDate(this.tableData1[params.index].update));
|
||||||
name: 'John Brown',
|
}
|
||||||
age: i + 1,
|
}
|
||||||
street: 'Lake Park',
|
]
|
||||||
building: 'C',
|
|
||||||
door: 2035,
|
|
||||||
caddress: 'Lake Street 42',
|
|
||||||
cname: 'SoftLake Co',
|
|
||||||
gender: 'M',
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
this.data1 = data;
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggleCollapse () {
|
mockTableData1 () {
|
||||||
this.$refs.side.toggleCollapse();
|
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)
|
||||||
},
|
},
|
||||||
change () {
|
{
|
||||||
this.isCollapsed = !this.isCollapsed;
|
n: 'People' + Math.floor(Math.random () * 100 + 1),
|
||||||
|
c: Math.floor(Math.random () * 1000000 + 100000)
|
||||||
},
|
},
|
||||||
changed (res) {
|
{
|
||||||
console.log(res)
|
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;
|
||||||
},
|
},
|
||||||
watch: {
|
formatDate (date) {
|
||||||
isCollapsed (val) {
|
const y = date.getFullYear();
|
||||||
// console.log(val)
|
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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
<template v-if="renderType === 'normal'"><span>{{row[column.key]}}</span></template>
|
<template v-if="renderType === 'normal'"><span>{{row[column.key]}}</span></template>
|
||||||
<template v-if="renderType === 'expand' && !row._disableExpand">
|
<template v-if="renderType === 'expand' && !row._disableExpand">
|
||||||
<div :class="expandCls" @click="toggleExpand">
|
<div :class="expandCls" @click="toggleExpand">
|
||||||
<Icon type="ios-arrow-right"></Icon>
|
<Icon type="ios-arrow-forward"></Icon>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<Cell
|
<Cell
|
||||||
|
|
|
||||||
|
|
@ -21,8 +21,8 @@
|
||||||
<span v-if="!column.renderHeader" :class="{[prefixCls + '-cell-sort']: column.sortable}" @click="handleSortByHead(getColumn(rowIndex, index)._index)">{{ column.title || '#' }}</span>
|
<span v-if="!column.renderHeader" :class="{[prefixCls + '-cell-sort']: column.sortable}" @click="handleSortByHead(getColumn(rowIndex, index)._index)">{{ column.title || '#' }}</span>
|
||||||
<render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
|
<render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
|
||||||
<span :class="[prefixCls + '-sort']" v-if="column.sortable">
|
<span :class="[prefixCls + '-sort']" v-if="column.sortable">
|
||||||
<i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: getColumn(rowIndex, index)._sortType === 'asc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'asc')"></i>
|
<i class="ivu-icon ivu-icon-md-arrow-dropup" :class="{on: getColumn(rowIndex, index)._sortType === 'asc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'asc')"></i>
|
||||||
<i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: getColumn(rowIndex, index)._sortType === 'desc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'desc')"></i>
|
<i class="ivu-icon ivu-icon-md-arrow-dropdown" :class="{on: getColumn(rowIndex, index)._sortType === 'desc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'desc')"></i>
|
||||||
</span>
|
</span>
|
||||||
<Poptip
|
<Poptip
|
||||||
v-if="isPopperShow(column)"
|
v-if="isPopperShow(column)"
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
transfer
|
transfer
|
||||||
@on-popper-hide="handleFilterHide(getColumn(rowIndex, index)._index)">
|
@on-popper-hide="handleFilterHide(getColumn(rowIndex, index)._index)">
|
||||||
<span :class="[prefixCls + '-filter']">
|
<span :class="[prefixCls + '-filter']">
|
||||||
<i class="ivu-icon ivu-icon-funnel" :class="{on: getColumn(rowIndex, index)._isFiltered}"></i>
|
<i class="ivu-icon ivu-icon-ios-funnel" :class="{on: getColumn(rowIndex, index)._isFiltered}"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div slot="content" :class="[prefixCls + '-filter-list']" v-if="getColumn(rowIndex, index)._filterMultiple">
|
<div slot="content" :class="[prefixCls + '-filter-list']" v-if="getColumn(rowIndex, index)._filterMultiple">
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: @btn-disable-color;
|
color: @btn-disable-color;
|
||||||
transition: color @transition-time @ease-in-out;
|
transition: color @transition-time @ease-in-out;
|
||||||
|
font-size: @font-size-large;
|
||||||
|
|
||||||
&:hover{
|
&:hover{
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue