update Table
update Table
This commit is contained in:
parent
6c99b9fe59
commit
39311a508f
5 changed files with 67 additions and 44 deletions
|
@ -70,4 +70,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
|
@ -128,4 +128,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
|
@ -1,62 +1,62 @@
|
|||
<template>
|
||||
<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 + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
|
||||
<table-head
|
||||
:prefix-cls="prefixCls"
|
||||
:style="tableStyle"
|
||||
:columns="cloneColumns"
|
||||
:obj-data="objData"
|
||||
:data="rebuildData"></table-head>
|
||||
:prefix-cls="prefixCls"
|
||||
:style="tableStyle"
|
||||
:columns="cloneColumns"
|
||||
:obj-data="objData"
|
||||
:data="rebuildData"></table-head>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
|
||||
<table-body
|
||||
v-ref:tbody
|
||||
:prefix-cls="prefixCls"
|
||||
:style="tableStyle"
|
||||
:columns="cloneColumns"
|
||||
:data="rebuildData"
|
||||
:obj-data="objData"></table-body>
|
||||
v-ref:tbody
|
||||
:prefix-cls="prefixCls"
|
||||
:style="tableStyle"
|
||||
:columns="cloneColumns"
|
||||
:data="rebuildData"
|
||||
:obj-data="objData"></table-body>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-fixed']">
|
||||
<div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
|
||||
<table-head
|
||||
fixed
|
||||
:prefix-cls="prefixCls"
|
||||
:style="fixedTableStyle"
|
||||
:columns="leftFixedColumns"
|
||||
:obj-data="objData"
|
||||
:data="rebuildData"></table-head>
|
||||
fixed
|
||||
:prefix-cls="prefixCls"
|
||||
:style="fixedTableStyle"
|
||||
:columns="leftFixedColumns"
|
||||
:obj-data="objData"
|
||||
:data="rebuildData"></table-head>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
|
||||
<table-body
|
||||
fixed
|
||||
:prefix-cls="prefixCls"
|
||||
:style="fixedTableStyle"
|
||||
:columns="leftFixedColumns"
|
||||
:data="rebuildData"
|
||||
:obj-data="objData"></table-body>
|
||||
fixed
|
||||
:prefix-cls="prefixCls"
|
||||
:style="fixedTableStyle"
|
||||
:columns="leftFixedColumns"
|
||||
:data="rebuildData"
|
||||
:obj-data="objData"></table-body>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-fixed-right']">
|
||||
<div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
|
||||
<table-head
|
||||
fixed
|
||||
:prefix-cls="prefixCls"
|
||||
:style="fixedRightTableStyle"
|
||||
:columns="rightFixedColumns"
|
||||
:obj-data="objData"
|
||||
:data="rebuildData"></table-head>
|
||||
fixed
|
||||
:prefix-cls="prefixCls"
|
||||
:style="fixedRightTableStyle"
|
||||
:columns="rightFixedColumns"
|
||||
:obj-data="objData"
|
||||
:data="rebuildData"></table-head>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
|
||||
<table-body
|
||||
fixed
|
||||
:prefix-cls="prefixCls"
|
||||
:style="fixedRightTableStyle"
|
||||
:columns="rightFixedColumns"
|
||||
:data="rebuildData"
|
||||
:obj-data="objData"></table-body>
|
||||
fixed
|
||||
:prefix-cls="prefixCls"
|
||||
:style="fixedRightTableStyle"
|
||||
:columns="rightFixedColumns"
|
||||
:data="rebuildData"
|
||||
:obj-data="objData"></table-body>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
|
||||
|
|
|
@ -8,7 +8,8 @@
|
|||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
width: 100%;
|
||||
width: inherit;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
color: @text-color;
|
||||
|
@ -205,7 +206,8 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-shadow: @shadow-right;
|
||||
//box-shadow: @shadow-right;
|
||||
box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
@ -222,12 +224,13 @@
|
|||
top: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
box-shadow: @shadow-left;
|
||||
//box-shadow: @shadow-left;
|
||||
box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
&-fixed-header{
|
||||
overflow: hidden;
|
||||
//position: relative;
|
||||
z-index: 3;
|
||||
//z-index: 3;
|
||||
}
|
||||
&-fixed-body{
|
||||
overflow: hidden;
|
||||
|
@ -235,6 +238,17 @@
|
|||
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{
|
||||
.sortable();
|
||||
}
|
||||
|
|
|
@ -8,9 +8,10 @@
|
|||
<!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
|
||||
<br>
|
||||
<i-table
|
||||
width="850"
|
||||
width="450"
|
||||
:height="height"
|
||||
stripe
|
||||
border
|
||||
:border="true"
|
||||
highlight-row
|
||||
:show-header="true"
|
||||
:columns="columns"
|
||||
|
@ -239,6 +240,14 @@
|
|||
// });
|
||||
// this.data.splice(0, 1);
|
||||
// this.columns.splice(2,1)
|
||||
// this.data.push({
|
||||
// name: '梁灏2',
|
||||
// age: 25,
|
||||
// address: '北京市朝阳区',
|
||||
// edit: false,
|
||||
// tag: 'home',
|
||||
// action: 1
|
||||
// })
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue