This commit is contained in:
梁灏 2017-10-23 19:01:47 +08:00
parent c2d74eca9a
commit 6c634aa631
2 changed files with 358 additions and 247 deletions

View file

@ -109,124 +109,320 @@
<!--}-->
<!--</script>-->
<style scoped>
.layout{
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.layout-breadcrumb{
padding: 10px 15px 0;
}
.layout-content{
min-height: 200px;
margin: 15px;
overflow: hidden;
background: #fff;
border-radius: 4px;
}
.layout-content-main{
padding: 10px;
}
.layout-copy{
text-align: center;
padding: 10px 0 20px;
color: #9ea7b4;
}
.layout-menu-left{
background: #464c5b;
}
.layout-header{
height: 60px;
background: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.layout-logo-left{
width: 90%;
height: 30px;
background: #5b6270;
border-radius: 3px;
margin: 15px auto;
}
.layout-ceiling-main a{
color: #9ba7b5;
}
.layout-hide-text .layout-text{
display: none;
}
.ivu-col{
/*transition: width .2s ease-in-out;*/
}
</style>
<!--<style scoped>-->
<!--.layout{-->
<!--border: 1px solid #d7dde4;-->
<!--background: #f5f7f9;-->
<!--position: relative;-->
<!--border-radius: 4px;-->
<!--overflow: hidden;-->
<!--}-->
<!--.layout-breadcrumb{-->
<!--padding: 10px 15px 0;-->
<!--}-->
<!--.layout-content{-->
<!--min-height: 200px;-->
<!--margin: 15px;-->
<!--overflow: hidden;-->
<!--background: #fff;-->
<!--border-radius: 4px;-->
<!--}-->
<!--.layout-content-main{-->
<!--padding: 10px;-->
<!--}-->
<!--.layout-copy{-->
<!--text-align: center;-->
<!--padding: 10px 0 20px;-->
<!--color: #9ea7b4;-->
<!--}-->
<!--.layout-menu-left{-->
<!--background: #464c5b;-->
<!--}-->
<!--.layout-header{-->
<!--height: 60px;-->
<!--background: #fff;-->
<!--box-shadow: 0 1px 1px rgba(0,0,0,.1);-->
<!--}-->
<!--.layout-logo-left{-->
<!--width: 90%;-->
<!--height: 30px;-->
<!--background: #5b6270;-->
<!--border-radius: 3px;-->
<!--margin: 15px auto;-->
<!--}-->
<!--.layout-ceiling-main a{-->
<!--color: #9ba7b5;-->
<!--}-->
<!--.layout-hide-text .layout-text{-->
<!--display: none;-->
<!--}-->
<!--.ivu-col{-->
<!--/*transition: width .2s ease-in-out;*/-->
<!--}-->
<!--</style>-->
<!--<template>-->
<!--<div class="layout" :class="{'layout-hide-text': spanLeft < 5}">-->
<!--<Row type="flex">-->
<!--<Col :span="spanLeft" class="layout-menu-left">-->
<!--<Menu active-name="1" theme="dark" width="auto">-->
<!--<div class="layout-logo-left"></div>-->
<!--<MenuItem name="1">-->
<!--<Icon type="ios-navigate" :size="iconSize"></Icon>-->
<!--<span class="layout-text">选项 1</span>-->
<!--</MenuItem>-->
<!--<MenuItem name="2">-->
<!--<Icon type="ios-keypad" :size="iconSize"></Icon>-->
<!--<span class="layout-text">选项 2</span>-->
<!--</MenuItem>-->
<!--<MenuItem name="3">-->
<!--<Icon type="ios-analytics" :size="iconSize"></Icon>-->
<!--<span class="layout-text">选项 3</span>-->
<!--</MenuItem>-->
<!--</Menu>-->
<!--</Col>-->
<!--<Col :span="spanRight">-->
<!--<div class="layout-header">-->
<!--<Button type="text" @click="toggleClick">-->
<!--<Icon type="navicon" size="32"></Icon>-->
<!--</Button>-->
<!--</div>-->
<!--<div class="layout-breadcrumb">-->
<!--<Breadcrumb>-->
<!--<BreadcrumbItem href="#">首页</BreadcrumbItem>-->
<!--<BreadcrumbItem href="#">应用中心</BreadcrumbItem>-->
<!--<BreadcrumbItem>某应用</BreadcrumbItem>-->
<!--</Breadcrumb>-->
<!--</div>-->
<!--<div class="layout-content">-->
<!--<div class="layout-content-main">-->
<!--<Table stripe :columns="columns1" :data="data1"></Table>-->
<!--</div>-->
<!--<hr style="margin: 10px 0;" />-->
<!--<div class="layout-content-main">-->
<!--<Table stripe :columns="columns2" :data="data2" ref="csvTable" @on-row-click="cc" />-->
<!--<i-button type="primary" size="large" @click="exportCSV">-->
<!--<icon type="ios-download-outline"></icon> Export to CSV-->
<!--</i-button>-->
<!--</div>-->
<!--</div>-->
<!--</Col>-->
<!--</Row>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--spanLeft: 5,-->
<!--spanRight: 19,-->
<!--columns1: [-->
<!--{-->
<!--title: '姓名',-->
<!--key: 'name'-->
<!--},-->
<!--{-->
<!--title: '年龄',-->
<!--key: 'age'-->
<!--},-->
<!--{-->
<!--title: '地址',-->
<!--key: 'address'-->
<!--},-->
<!--{-->
<!--title: '姓名',-->
<!--key: 'name'-->
<!--},-->
<!--{-->
<!--title: '年龄',-->
<!--key: 'age'-->
<!--},-->
<!--{-->
<!--title: '地址',-->
<!--key: 'address'-->
<!--},-->
<!--{-->
<!--title: '姓名',-->
<!--key: 'name'-->
<!--},-->
<!--{-->
<!--title: '年龄',-->
<!--key: 'age'-->
<!--},-->
<!--{-->
<!--title: '地址',-->
<!--key: 'address'-->
<!--}-->
<!--],-->
<!--data1: [-->
<!--{-->
<!--name: '王小明',-->
<!--age: 18,-->
<!--address: '北京市朝阳区芍药居'-->
<!--},-->
<!--{-->
<!--name: '张小刚',-->
<!--age: 25,-->
<!--address: '北京市海淀区西二旗'-->
<!--},-->
<!--{-->
<!--name: '李小红',-->
<!--age: 30,-->
<!--address: '上海市浦东新区世纪大道'-->
<!--},-->
<!--{-->
<!--name: '周小伟',-->
<!--age: 26,-->
<!--address: '深圳市南山区深南大道'-->
<!--},-->
<!--{-->
<!--name: '王小明',-->
<!--age: 18,-->
<!--address: '北京市朝阳区芍药居'-->
<!--},-->
<!--{-->
<!--name: '张小刚',-->
<!--age: 25,-->
<!--address: '北京市海淀区西二旗'-->
<!--},-->
<!--{-->
<!--name: '李小红',-->
<!--age: 30,-->
<!--address: '上海市浦东新区世纪大道'-->
<!--},-->
<!--{-->
<!--name: '周小伟',-->
<!--age: 26,-->
<!--address: '深圳市南山区深南大道'-->
<!--},-->
<!--{-->
<!--name: '王小明',-->
<!--age: 18,-->
<!--address: '北京市朝阳区芍药居'-->
<!--},-->
<!--{-->
<!--name: '张小刚',-->
<!--age: 25,-->
<!--address: '北京市海淀区西二旗'-->
<!--},-->
<!--{-->
<!--name: '李小红',-->
<!--age: 30,-->
<!--address: '上海市浦东新区世纪大道'-->
<!--},-->
<!--{-->
<!--name: '周小伟',-->
<!--age: 26,-->
<!--address: '深圳市南山区深南大道'-->
<!--},-->
<!--{-->
<!--name: '王小明',-->
<!--age: 18,-->
<!--address: '北京市朝阳区芍药居'-->
<!--},-->
<!--{-->
<!--name: '张小刚',-->
<!--age: 25,-->
<!--address: '北京市海淀区西二旗'-->
<!--},-->
<!--{-->
<!--name: '李小红',-->
<!--age: 30,-->
<!--address: '上海市浦东新区世纪大道'-->
<!--},-->
<!--{-->
<!--name: '周小伟',-->
<!--age: 26,-->
<!--address: '深圳市南山区深南大道'-->
<!--}-->
<!--],-->
<!--columns2: [-->
<!--{-->
<!--title: '姓名',-->
<!--key: 'name'-->
<!--},-->
<!--{-->
<!--title: '年龄',-->
<!--key: 'age'-->
<!--},-->
<!--{-->
<!--title: '地址',-->
<!--key: 'address',-->
<!--render: (h) => {-->
<!--return h('Button', {-->
<!--nativeOn: {-->
<!--click: (event) => {-->
<!--console.log(2)-->
<!--event.stopPropagation();-->
<!--}-->
<!--}-->
<!--}, 'click')-->
<!--}-->
<!--}-->
<!--],-->
<!--data2: [-->
<!--{-->
<!--name: '王小明',-->
<!--age: 18,-->
<!--address: '北京市朝\n阳区芍药居'-->
<!--},-->
<!--{-->
<!--name: '张小刚',-->
<!--age: 25,-->
<!--address: '北京市海,淀区西二旗'-->
<!--},-->
<!--{-->
<!--name: '李小红',-->
<!--age: 30,-->
<!--address: '上海市浦东\r新区世纪大道'-->
<!--},-->
<!--{-->
<!--name: '周小伟',-->
<!--age: 26,-->
<!--address: '深圳市南山区深南大道'-->
<!--}-->
<!--]-->
<!--};-->
<!--},-->
<!--computed: {-->
<!--iconSize () {-->
<!--return this.spanLeft === 5 ? 14 : 24;-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--toggleClick () {-->
<!--if (this.spanLeft === 5) {-->
<!--this.spanLeft = 2;-->
<!--this.spanRight = 22;-->
<!--} else {-->
<!--this.spanLeft = 5;-->
<!--this.spanRight = 19;-->
<!--}-->
<!--},-->
<!--exportCSV () {-->
<!--this.$refs.csvTable.exportCsv({-->
<!--filename: '原始数据',-->
<!--separator: ';',-->
<!--quoted: true-->
<!--});-->
<!--},-->
<!--cc () {-->
<!--console.log(1)-->
<!--}-->
<!--}-->
<!--};-->
<!--</script>-->
<template>
<div class="layout" :class="{'layout-hide-text': spanLeft < 5}">
<Row type="flex">
<Col :span="spanLeft" class="layout-menu-left">
<Menu active-name="1" theme="dark" width="auto">
<div class="layout-logo-left"></div>
<MenuItem name="1">
<Icon type="ios-navigate" :size="iconSize"></Icon>
<span class="layout-text">选项 1</span>
</MenuItem>
<MenuItem name="2">
<Icon type="ios-keypad" :size="iconSize"></Icon>
<span class="layout-text">选项 2</span>
</MenuItem>
<MenuItem name="3">
<Icon type="ios-analytics" :size="iconSize"></Icon>
<span class="layout-text">选项 3</span>
</MenuItem>
</Menu>
</Col>
<Col :span="spanRight">
<div class="layout-header">
<Button type="text" @click="toggleClick">
<Icon type="navicon" size="32"></Icon>
</Button>
</div>
<div class="layout-breadcrumb">
<Breadcrumb>
<BreadcrumbItem href="#">首页</BreadcrumbItem>
<BreadcrumbItem href="#">应用中心</BreadcrumbItem>
<BreadcrumbItem>某应用</BreadcrumbItem>
</Breadcrumb>
</div>
<div class="layout-content">
<div class="layout-content-main">
<Table stripe :columns="columns1" :data="data1"></Table>
</div>
<hr style="margin: 10px 0;" />
<div class="layout-content-main">
<Table stripe :columns="columns2" :data="data2" ref="csvTable" />
<i-button type="primary" size="large" @click="exportCSV">
<icon type="ios-download-outline"></icon> Export to CSV
</i-button>
</div>
</div>
</Col>
</Row>
</div>
<Table border :columns="columns6" :data="data5" @on-filter-change="cc"></Table>
</template>
<script>
export default {
data () {
return {
spanLeft: 5,
spanRight: 19,
columns1: [
columns6: [
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age'
},
{
title: '地址',
key: 'address'
title: '日期',
key: 'date'
},
{
title: '姓名',
@ -234,167 +430,80 @@
},
{
title: '年龄',
key: 'age'
key: 'age',
filters: [
{
label: '大于25岁',
value: 1
},
{
label: '小于25岁',
value: 2
}
],
filterMultiple: false,
filterMethod (value, row) {
if (value === 1) {
return row.age > 25;
} else if (value === 2) {
return row.age < 25;
}
}
},
{
title: '地址',
key: 'address'
},
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age'
},
{
title: '地址',
key: 'address'
key: 'address',
filters: [
{
label: '北京',
value: '北京'
},
{
label: '上海',
value: '上海'
},
{
label: '深圳',
value: '深圳'
}
],
filterMethod (value, row) {
return row.address.indexOf(value) > -1;
}
}
],
data1: [
data5: [
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居'
address: '北京市朝阳区芍药居',
date: '2016-10-03'
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗'
address: '北京市海淀区西二旗',
date: '2016-10-01'
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道'
address: '上海市浦东新区世纪大道',
date: '2016-10-02'
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道'
},
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居'
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗'
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道'
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道'
},
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居'
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗'
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道'
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道'
},
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居'
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗'
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道'
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道'
}
],
columns2: [
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age'
},
{
title: '地址',
key: 'address'
}
],
data2: [
{
name: '王小明',
age: 18,
address: '北京市朝\n阳区芍药居'
},
{
name: '张小刚',
age: 25,
address: '北京市海,淀区西二旗'
},
{
name: '李小红',
age: 30,
address: '上海市浦东\r新区世纪大道'
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道'
address: '深圳市南山区深南大道',
date: '2016-10-04'
}
]
};
},
computed: {
iconSize () {
return this.spanLeft === 5 ? 14 : 24;
}
},
methods: {
toggleClick () {
if (this.spanLeft === 5) {
this.spanLeft = 2;
this.spanRight = 22;
} else {
this.spanLeft = 5;
this.spanRight = 19;
}
},
exportCSV () {
this.$refs.csvTable.exportCsv({
filename: '原始数据',
separator: ';',
quoted: true
});
cc (dd) {
console.log(dd);
}
}
};
}
</script>

View file

@ -574,6 +574,7 @@
this.cloneColumns[index]._isFiltered = true;
this.cloneColumns[index]._filterVisible = false;
this.$emit('on-filter-change', column);
},
handleFilterSelect (index, value) {
this.cloneColumns[index]._filterChecked = [value];
@ -587,6 +588,7 @@
let filterData = this.makeDataWithSort();
filterData = this.filterOtherData(filterData, index);
this.rebuildData = filterData;
this.$emit('on-filter-change', this.cloneColumns[index]);
},
makeData () {
let data = deepCopy(this.data);