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

fixed #690

Browse source
This commit is contained in:
梁灏 2017-09-20 14:18:45 +08:00
parent d4cd421cc2
commit c5beedf87e
4 changed files with 322 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

361
examples/routers/table.vue
View file

@ -1,77 +1,315 @@
<!--<template>-->
<!--<div>-->
<!--<Table width="550" height="200" highlight-row :loading="loading" :columns="columns3" :data="data1" ref="table" @on-current-change="handleChange" @on-row-click="rc">-->
<!--<div slot="loading">-->
<!--<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>-->
<!--<div>Loading</div>-->
<!--</div>-->
<!--</Table>-->
<!--<br><br>-->
<!--<Button @click="handleClear">clear</Button>-->
<!--<Button @click="loading = !loading">Loading</Button>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--loading: false,-->
<!--columns3: [-->
<!--{-->
<!--title: '姓名',-->
<!--key: 'name',-->
<!--width: 100,-->
<!--fixed: 'left'-->
<!--},-->
<!--{-->
<!--title: '年龄',-->
<!--key: 'age',-->
<!--width: 100-->
<!--},-->
<!--{-->
<!--title: '省份',-->
<!--key: 'province',-->
<!--width: 100-->
<!--},-->
<!--{-->
<!--title: '市区',-->
<!--key: 'city',-->
<!--width: 100-->
<!--},-->
<!--{-->
<!--title: '地址',-->
<!--key: 'address',-->
<!--width: 200-->
<!--},-->
<!--{-->
<!--title: '邮编',-->
<!--key: 'zip',-->
<!--width: 100-->
<!--},-->
<!--{-->
<!--title: '操作',-->
<!--key: 'action',-->
<!--fixed: 'right',-->
<!--width: 120,-->
<!--render: (h, params) => {-->
<!--return h('div', [-->
<!--h('Button', {-->
<!--props: {-->
<!--type: 'text',-->
<!--size: 'small'-->
<!--}-->
<!--}, '查看'),-->
<!--h('Button', {-->
<!--props: {-->
<!--type: 'text',-->
<!--size: 'small'-->
<!--}-->
<!--}, '编辑')-->
<!--]);-->
<!--}-->
<!--}-->
<!--],-->
<!--data1: [-->
<!--{-->
<!--name: '王小明',-->
<!--age: 18,-->
<!--address: '北京市朝阳区芍药居'-->
<!--},-->
<!--{-->
<!--name: '张小刚',-->
<!--age: 25,-->
<!--address: '北京市海淀区西二旗'-->
<!--},-->
<!--{-->
<!--name: '李小红',-->
<!--age: 30,-->
<!--address: '上海市浦东新区世纪大道'-->
<!--},-->
<!--{-->
<!--name: '周小伟',-->
<!--age: 26,-->
<!--address: '深圳市南山区深南大道'-->
<!--}-->
<!--]-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--handleClear () {-->
<!--this.$refs.table.clearCurrentRow();-->
<!--},-->
<!--handleChange (newData, oldData) {-->
<!--// console.log(newData, oldData)-->
<!--},-->
<!--rc (data, index) {-->
<!--console.log(data, index);-->
<!--}-->
<!--}-->
<!--}-->
<!--</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>
<template> <template>
<div> <div class="layout" :class="{'layout-hide-text': spanLeft < 5}">
<Table width="550" height="200" highlight-row :loading="loading" :columns="columns3" :data="data1" ref="table" @on-current-change="handleChange" @on-row-click="rc"> <Row type="flex">
<div slot="loading"> <Col :span="spanLeft" class="layout-menu-left">
<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon> <Menu active-name="1" theme="dark" width="auto">
<div>Loading</div> <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>
</Table> <div class="layout-breadcrumb">
<br><br> <Breadcrumb>
<Button @click="handleClear">clear</Button> <BreadcrumbItem href="#">首页</BreadcrumbItem>
<Button @click="loading = !loading">Loading</Button> <BreadcrumbItem href="#">应用中心</BreadcrumbItem>
<BreadcrumbItem>某应用</BreadcrumbItem>
</Breadcrumb>
</div>
<div class="layout-content">
<div class="layout-content-main">
<Table :columns="columns1" :data="data1"></Table>
</div>
</div>
<div class="layout-copy">
2011-2016 &copy; TalkingData
</div>
</Col>
</Row>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
loading: false, spanLeft: 5,
columns3: [ spanRight: 19,
columns1: [
{ {
title: '姓名', title: '姓名',
key: 'name', key: 'name'
width: 100,
fixed: 'left'
}, },
{ {
title: '年龄', title: '年龄',
key: 'age', key: 'age'
width: 100
},
{
title: '省份',
key: 'province',
width: 100
},
{
title: '市区',
key: 'city',
width: 100
}, },
{ {
title: '地址', title: '地址',
key: 'address', key: 'address'
width: 200
}, },
{ {
title: '邮编', title: '姓名',
key: 'zip', key: 'name'
width: 100
}, },
{ {
title: '操作', title: '年龄',
key: 'action', key: 'age'
fixed: 'right', },
width: 120, {
render: (h, params) => { title: '地址',
return h('div', [ key: 'address'
h('Button', { },
props: { {
type: 'text', title: '姓名',
size: 'small' key: 'name'
} },
}, '查看'), {
h('Button', { title: '年龄',
props: { key: 'age'
type: 'text', },
size: 'small' {
} title: '地址',
}, '编辑') key: 'address'
]);
}
} }
], ],
data1: [ 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: '王小明', name: '王小明',
age: 18, age: 18,
@ -95,15 +333,20 @@
] ]
} }
}, },
computed: {
iconSize () {
return this.spanLeft === 5 ? 14 : 24;
}
},
methods: { methods: {
handleClear () { toggleClick () {
this.$refs.table.clearCurrentRow(); if (this.spanLeft === 5) {
}, this.spanLeft = 2;
handleChange (newData, oldData) { this.spanRight = 22;
// console.log(newData, oldData) } else {
}, this.spanLeft = 5;
rc (data, index) { this.spanRight = 19;
console.log(data, index); }
} }
} }
} }

13
package-lock.json generated
View file

@ -1339,6 +1339,11 @@
"integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=", "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
"dev": true "dev": true
}, },
"batch-processor": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
"integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg="
},
"beeper": { "beeper": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.1.tgz", "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.1.tgz",
@ -3844,6 +3849,14 @@
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=", "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
"dev": true "dev": true
}, },
"element-resize-detector": {
"version": "1.1.12",
"resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.1.12.tgz",
"integrity": "sha1-iz/W7t2hf5wAs2Cg6i35knroC6I=",
"requires": {
"batch-processor": "1.0.0"
}
},
"elliptic": { "elliptic": {
"version": "6.4.0", "version": "6.4.0",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz", "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz",

1
package.json
View file

@ -43,6 +43,7 @@
"async-validator": "^1.8.1", "async-validator": "^1.8.1",
"core-js": "^2.5.0", "core-js": "^2.5.0",
"deepmerge": "^1.5.1", "deepmerge": "^1.5.1",
"element-resize-detector": "^1.1.12",
"popper.js": "^0.6.4", "popper.js": "^0.6.4",
"tinycolor2": "^1.4.1" "tinycolor2": "^1.4.1"
}, },

8
src/components/table/table.vue
View file

@ -96,6 +96,7 @@
import Csv from '../../utils/csv'; import Csv from '../../utils/csv';
import ExportCsv from './export-csv'; import ExportCsv from './export-csv';
import Locale from '../../mixins/locale'; import Locale from '../../mixins/locale';
import elementResizeDetectorMaker from 'element-resize-detector';
const prefixCls = 'ivu-table'; const prefixCls = 'ivu-table';
@ -727,8 +728,11 @@
this.handleResize(); this.handleResize();
this.fixedHeader(); this.fixedHeader();
this.$nextTick(() => this.ready = true); this.$nextTick(() => this.ready = true);
// window.addEventListener('resize', this.handleResize, false);
on(window, 'resize', this.handleResize); on(window, 'resize', this.handleResize);
this.observer = elementResizeDetectorMaker();
this.observer.listenTo(this.$el, this.handleResize);
this.$on('on-visible-change', (val) => { this.$on('on-visible-change', (val) => {
if (val) { if (val) {
this.handleResize(); this.handleResize();
@ -737,8 +741,8 @@
}); });
}, },
beforeDestroy () { beforeDestroy () {
// window.removeEventListener('resize', this.handleResize, false);
off(window, 'resize', this.handleResize); off(window, 'resize', this.handleResize);
this.observer.removeListener(this.$el, this.handleResize);
}, },
watch: { watch: {
data: { data: {