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

update Table

Browse source 
update Table
This commit is contained in:
梁灏 2016-11-29 18:42:34 +08:00
parent 6c99b9fe59
commit 39311a508f
5 changed files with 67 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/table/table-body.vue
View file

@ -70,4 +70,4 @@
} }
} }
} }
</script> </script>

2
src/components/table/table-head.vue
View file

@ -128,4 +128,4 @@
} }
} }
} }
</script> </script>

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

@ -1,62 +1,62 @@
<template> <template>
<div :class="wrapClasses" :style="styles"> <div :class="wrapClasses" :style="styles">
<div :class="classes" :style="styles"> <div :class="classes">
<div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div> <div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>
<div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel"> <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
<table-head <table-head
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
:style="tableStyle" :style="tableStyle"
:columns="cloneColumns" :columns="cloneColumns"
:obj-data="objData" :obj-data="objData"
:data="rebuildData"></table-head> :data="rebuildData"></table-head>
</div> </div>
<div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll"> <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
<table-body <table-body
v-ref:tbody v-ref:tbody
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
:style="tableStyle" :style="tableStyle"
:columns="cloneColumns" :columns="cloneColumns"
:data="rebuildData" :data="rebuildData"
:obj-data="objData"></table-body> :obj-data="objData"></table-body>
</div> </div>
<div :class="[prefixCls + '-fixed']"> <div :class="[prefixCls + '-fixed']">
<div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
<table-head <table-head
fixed fixed
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
:style="fixedTableStyle" :style="fixedTableStyle"
:columns="leftFixedColumns" :columns="leftFixedColumns"
:obj-data="objData" :obj-data="objData"
:data="rebuildData"></table-head> :data="rebuildData"></table-head>
</div> </div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body> <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
<table-body <table-body
fixed fixed
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
:style="fixedTableStyle" :style="fixedTableStyle"
:columns="leftFixedColumns" :columns="leftFixedColumns"
:data="rebuildData" :data="rebuildData"
:obj-data="objData"></table-body> :obj-data="objData"></table-body>
</div> </div>
</div> </div>
<div :class="[prefixCls + '-fixed-right']"> <div :class="[prefixCls + '-fixed-right']">
<div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
<table-head <table-head
fixed fixed
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
:style="fixedRightTableStyle" :style="fixedRightTableStyle"
:columns="rightFixedColumns" :columns="rightFixedColumns"
:obj-data="objData" :obj-data="objData"
:data="rebuildData"></table-head> :data="rebuildData"></table-head>
</div> </div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body> <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
<table-body <table-body
fixed fixed
:prefix-cls="prefixCls" :prefix-cls="prefixCls"
:style="fixedRightTableStyle" :style="fixedRightTableStyle"
:columns="rightFixedColumns" :columns="rightFixedColumns"
:data="rebuildData" :data="rebuildData"
:obj-data="objData"></table-body> :obj-data="objData"></table-body>
</div> </div>
</div> </div>
<div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div> <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>

22
src/styles/components/table.less
View file

@ -8,7 +8,8 @@
border-bottom: 0; border-bottom: 0;
border-right: 0; border-right: 0;
} }
width: 100%; width: inherit;
height: 100%;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
color: @text-color; color: @text-color;
@ -205,7 +206,8 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
box-shadow: @shadow-right; //box-shadow: @shadow-right;
box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);
&::before { &::before {
content: ''; content: '';
@ -222,12 +224,13 @@
top: 0; top: 0;
left: auto; left: auto;
right: 0; right: 0;
box-shadow: @shadow-left; //box-shadow: @shadow-left;
box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
} }
&-fixed-header{ &-fixed-header{
overflow: hidden; overflow: hidden;
//position: relative; //position: relative;
z-index: 3; //z-index: 3;
} }
&-fixed-body{ &-fixed-body{
overflow: hidden; overflow: hidden;
@ -235,6 +238,17 @@
z-index: 3; z-index: 3;
} }
&-fixed-shadow {
width: 1px;
height: 100%;
position: absolute;
top: 0;
right: 0;
box-shadow: @shadow-right;
overflow: hidden;
z-index: 1;
}
&-sort{ &-sort{
.sortable(); .sortable();
} }

13
test/routers/table.vue
View file

@ -8,9 +8,10 @@
<!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>--> <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
<br> <br>
<i-table <i-table
width="850" width="450"
:height="height"
stripe stripe
border :border="true"
highlight-row highlight-row
:show-header="true" :show-header="true"
:columns="columns" :columns="columns"
@ -239,6 +240,14 @@
// }); // });
// this.data.splice(0, 1); // this.data.splice(0, 1);
// this.columns.splice(2,1) // this.columns.splice(2,1)
// this.data.push({
// name: '梁灏2',
// age: 25,
// address: '北京市朝阳区',
// edit: false,
// tag: 'home',
// action: 1
// })
}, 3000); }, 3000);
} }
} }