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>
|
||||
<div>
|
||||
<!-- <br><br><br><br><br> -->
|
||||
<!-- <Table border :show-header='false' :columns="columns1" height="500" :data="data1"></Table> -->
|
||||
<!-- <Table border :columns="columns1" height='300'></Table> -->
|
||||
<!-- <br><br><br><br><br> -->
|
||||
<!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> -->
|
||||
<!--<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>
|
||||
<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>
|
||||
|
|
@ -78,454 +12,139 @@ table {
|
|||
export default {
|
||||
data () {
|
||||
return {
|
||||
isCollapsed: false,
|
||||
columns1: [
|
||||
tableData1: this.mockTableData1(),
|
||||
tableColumns1: [
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
align: 'center',
|
||||
minWidth: 100,
|
||||
maxWidth: 200,
|
||||
fixed: 'left',
|
||||
filters: [
|
||||
{
|
||||
label: 'Joe',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: 'John',
|
||||
value: 2
|
||||
}
|
||||
],
|
||||
filterMultiple: false,
|
||||
filterMethod (value, row) {
|
||||
if (value === 1) {
|
||||
return row.name === 'Joe';
|
||||
} else if (value === 2) {
|
||||
return row.name === 'John Brown';
|
||||
}
|
||||
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: '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,
|
||||
title: 'Portrayal',
|
||||
key: 'portrayal',
|
||||
render: (h, params) => {
|
||||
return h('div', [
|
||||
h('Button', {
|
||||
props: {
|
||||
type: 'text',
|
||||
size: 'small'
|
||||
}
|
||||
}, 'View'),
|
||||
h('Button', {
|
||||
props: {
|
||||
type: 'text',
|
||||
size: 'small'
|
||||
}
|
||||
}, 'Edit')
|
||||
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)
|
||||
}))
|
||||
])
|
||||
]);
|
||||
}
|
||||
}
|
||||
],
|
||||
data1: [],
|
||||
data4: [
|
||||
{
|
||||
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
|
||||
},
|
||||
{
|
||||
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;
|
||||
}
|
||||
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')
|
||||
}))
|
||||
])
|
||||
]);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
fixed: 'right',
|
||||
filters: [
|
||||
{
|
||||
label: 'New York',
|
||||
value: 'New York'
|
||||
},
|
||||
{
|
||||
label: 'London',
|
||||
value: 'London'
|
||||
},
|
||||
{
|
||||
label: 'Sydney',
|
||||
value: 'Sydney'
|
||||
}
|
||||
],
|
||||
filterMethod (value, row) {
|
||||
return row.address.indexOf(value) > -1;
|
||||
title: 'Sampling Time',
|
||||
key: 'time',
|
||||
render: (h, params) => {
|
||||
return h('div', 'Almost' + params.row.time + 'days');
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Updated Time',
|
||||
key: 'update',
|
||||
render: (h, params) => {
|
||||
return h('div', this.formatDate(this.tableData1[params.index].update));
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
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 = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
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: {
|
||||
toggleCollapse () {
|
||||
this.$refs.side.toggleCollapse();
|
||||
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;
|
||||
},
|
||||
change () {
|
||||
this.isCollapsed = !this.isCollapsed;
|
||||
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;
|
||||
},
|
||||
changed (res) {
|
||||
console.log(res)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isCollapsed (val) {
|
||||
// console.log(val)
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<template v-if="renderType === 'normal'"><span>{{row[column.key]}}</span></template>
|
||||
<template v-if="renderType === 'expand' && !row._disableExpand">
|
||||
<div :class="expandCls" @click="toggleExpand">
|
||||
<Icon type="ios-arrow-right"></Icon>
|
||||
<Icon type="ios-arrow-forward"></Icon>
|
||||
</div>
|
||||
</template>
|
||||
<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>
|
||||
<render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
|
||||
<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-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-dropup" :class="{on: getColumn(rowIndex, index)._sortType === 'asc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'asc')"></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>
|
||||
<Poptip
|
||||
v-if="isPopperShow(column)"
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
transfer
|
||||
@on-popper-hide="handleFilterHide(getColumn(rowIndex, index)._index)">
|
||||
<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>
|
||||
|
||||
<div slot="content" :class="[prefixCls + '-filter-list']" v-if="getColumn(rowIndex, index)._filterMultiple">
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
position: absolute;
|
||||
color: @btn-disable-color;
|
||||
transition: color @transition-time @ease-in-out;
|
||||
font-size: @font-size-large;
|
||||
|
||||
&:hover{
|
||||
color: inherit;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue