fixed #2078
This commit is contained in:
梁灏
parent
c2d74eca9a
commit
6c634aa631
2 changed files with 358 additions and 247 deletions
|
|
@ -109,124 +109,320 @@
|
||||||
<!--}-->
|
<!--}-->
|
||||||
<!--</script>-->
|
<!--</script>-->
|
||||||
|
|
||||||
<style scoped>
|
<!--<style scoped>-->
|
||||||
.layout{
|
<!--.layout{-->
|
||||||
border: 1px solid #d7dde4;
|
<!--border: 1px solid #d7dde4;-->
|
||||||
background: #f5f7f9;
|
<!--background: #f5f7f9;-->
|
||||||
position: relative;
|
<!--position: relative;-->
|
||||||
border-radius: 4px;
|
<!--border-radius: 4px;-->
|
||||||
overflow: hidden;
|
<!--overflow: hidden;-->
|
||||||
}
|
<!--}-->
|
||||||
.layout-breadcrumb{
|
<!--.layout-breadcrumb{-->
|
||||||
padding: 10px 15px 0;
|
<!--padding: 10px 15px 0;-->
|
||||||
}
|
<!--}-->
|
||||||
.layout-content{
|
<!--.layout-content{-->
|
||||||
min-height: 200px;
|
<!--min-height: 200px;-->
|
||||||
margin: 15px;
|
<!--margin: 15px;-->
|
||||||
overflow: hidden;
|
<!--overflow: hidden;-->
|
||||||
background: #fff;
|
<!--background: #fff;-->
|
||||||
border-radius: 4px;
|
<!--border-radius: 4px;-->
|
||||||
}
|
<!--}-->
|
||||||
.layout-content-main{
|
<!--.layout-content-main{-->
|
||||||
padding: 10px;
|
<!--padding: 10px;-->
|
||||||
}
|
<!--}-->
|
||||||
.layout-copy{
|
<!--.layout-copy{-->
|
||||||
text-align: center;
|
<!--text-align: center;-->
|
||||||
padding: 10px 0 20px;
|
<!--padding: 10px 0 20px;-->
|
||||||
color: #9ea7b4;
|
<!--color: #9ea7b4;-->
|
||||||
}
|
<!--}-->
|
||||||
.layout-menu-left{
|
<!--.layout-menu-left{-->
|
||||||
background: #464c5b;
|
<!--background: #464c5b;-->
|
||||||
}
|
<!--}-->
|
||||||
.layout-header{
|
<!--.layout-header{-->
|
||||||
height: 60px;
|
<!--height: 60px;-->
|
||||||
background: #fff;
|
<!--background: #fff;-->
|
||||||
box-shadow: 0 1px 1px rgba(0,0,0,.1);
|
<!--box-shadow: 0 1px 1px rgba(0,0,0,.1);-->
|
||||||
}
|
<!--}-->
|
||||||
.layout-logo-left{
|
<!--.layout-logo-left{-->
|
||||||
width: 90%;
|
<!--width: 90%;-->
|
||||||
height: 30px;
|
<!--height: 30px;-->
|
||||||
background: #5b6270;
|
<!--background: #5b6270;-->
|
||||||
border-radius: 3px;
|
<!--border-radius: 3px;-->
|
||||||
margin: 15px auto;
|
<!--margin: 15px auto;-->
|
||||||
}
|
<!--}-->
|
||||||
.layout-ceiling-main a{
|
<!--.layout-ceiling-main a{-->
|
||||||
color: #9ba7b5;
|
<!--color: #9ba7b5;-->
|
||||||
}
|
<!--}-->
|
||||||
.layout-hide-text .layout-text{
|
<!--.layout-hide-text .layout-text{-->
|
||||||
display: none;
|
<!--display: none;-->
|
||||||
}
|
<!--}-->
|
||||||
.ivu-col{
|
<!--.ivu-col{-->
|
||||||
/*transition: width .2s ease-in-out;*/
|
<!--/*transition: width .2s ease-in-out;*/-->
|
||||||
}
|
<!--}-->
|
||||||
</style>
|
<!--</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>
|
<template>
|
||||||
<div class="layout" :class="{'layout-hide-text': spanLeft < 5}">
|
<Table border :columns="columns6" :data="data5" @on-filter-change="cc"></Table>
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
spanLeft: 5,
|
columns6: [
|
||||||
spanRight: 19,
|
|
||||||
columns1: [
|
|
||||||
{
|
{
|
||||||
title: '姓名',
|
title: '日期',
|
||||||
key: 'name'
|
key: 'date'
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '年龄',
|
|
||||||
key: 'age'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '地址',
|
|
||||||
key: 'address'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '姓名',
|
title: '姓名',
|
||||||
|
|
@ -234,167 +430,80 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '年龄',
|
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: '地址',
|
title: '地址',
|
||||||
key: 'address'
|
key: 'address',
|
||||||
},
|
filters: [
|
||||||
{
|
{
|
||||||
title: '姓名',
|
label: '北京',
|
||||||
key: 'name'
|
value: '北京'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '年龄',
|
label: '上海',
|
||||||
key: 'age'
|
value: '上海'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '地址',
|
label: '深圳',
|
||||||
key: 'address'
|
value: '深圳'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
filterMethod (value, row) {
|
||||||
|
return row.address.indexOf(value) > -1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
data1: [
|
data5: [
|
||||||
{
|
{
|
||||||
name: '王小明',
|
name: '王小明',
|
||||||
age: 18,
|
age: 18,
|
||||||
address: '北京市朝阳区芍药居'
|
address: '北京市朝阳区芍药居',
|
||||||
|
date: '2016-10-03'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '张小刚',
|
name: '张小刚',
|
||||||
age: 25,
|
age: 25,
|
||||||
address: '北京市海淀区西二旗'
|
address: '北京市海淀区西二旗',
|
||||||
|
date: '2016-10-01'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '李小红',
|
name: '李小红',
|
||||||
age: 30,
|
age: 30,
|
||||||
address: '上海市浦东新区世纪大道'
|
address: '上海市浦东新区世纪大道',
|
||||||
|
date: '2016-10-02'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '周小伟',
|
name: '周小伟',
|
||||||
age: 26,
|
age: 26,
|
||||||
address: '深圳市南山区深南大道'
|
address: '深圳市南山区深南大道',
|
||||||
},
|
date: '2016-10-04'
|
||||||
{
|
|
||||||
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: '深圳市南山区深南大道'
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
iconSize () {
|
|
||||||
return this.spanLeft === 5 ? 14 : 24;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggleClick () {
|
cc (dd) {
|
||||||
if (this.spanLeft === 5) {
|
console.log(dd);
|
||||||
this.spanLeft = 2;
|
|
||||||
this.spanRight = 22;
|
|
||||||
} else {
|
|
||||||
this.spanLeft = 5;
|
|
||||||
this.spanRight = 19;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
exportCSV () {
|
|
||||||
this.$refs.csvTable.exportCsv({
|
|
||||||
filename: '原始数据',
|
|
||||||
separator: ';',
|
|
||||||
quoted: true
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -574,6 +574,7 @@
|
||||||
|
|
||||||
this.cloneColumns[index]._isFiltered = true;
|
this.cloneColumns[index]._isFiltered = true;
|
||||||
this.cloneColumns[index]._filterVisible = false;
|
this.cloneColumns[index]._filterVisible = false;
|
||||||
|
this.$emit('on-filter-change', column);
|
||||||
},
|
},
|
||||||
handleFilterSelect (index, value) {
|
handleFilterSelect (index, value) {
|
||||||
this.cloneColumns[index]._filterChecked = [value];
|
this.cloneColumns[index]._filterChecked = [value];
|
||||||
|
|
@ -587,6 +588,7 @@
|
||||||
let filterData = this.makeDataWithSort();
|
let filterData = this.makeDataWithSort();
|
||||||
filterData = this.filterOtherData(filterData, index);
|
filterData = this.filterOtherData(filterData, index);
|
||||||
this.rebuildData = filterData;
|
this.rebuildData = filterData;
|
||||||
|
this.$emit('on-filter-change', this.cloneColumns[index]);
|
||||||
},
|
},
|
||||||
makeData () {
|
makeData () {
|
||||||
let data = deepCopy(this.data);
|
let data = deepCopy(this.data);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue