|
@@ -1,16 +1,18 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div class="bs-table">
|
|
|
<!-- :header-cell-style="{background:'#EEEEEE',color:'#333'}" -->
|
|
|
- <el-table ref="table" :fit="tool.calculatedColumnWidth($refs.table,layout)" :row-class-name="tableClassName" highlight-current-row :data="data" size="mini" :height="height" @row-click="rowClick" style="width:100%;" :header-cell-style="{height:'40px',color:'#606266',fontWeight:'400',fontSize:'14px'}"
|
|
|
- :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}" border @selection-change="selectionChange" @header-dragend="headerDragend">
|
|
|
+ <el-table ref="table" :fit="tool.calculatedColumnWidth($refs.table,layout)" :row-class-name="tableClassName" highlight-current-row :data="data"
|
|
|
+ size="mini" :height="height" @row-click="rowClick" style="width:100%;" :header-cell-style="{height:'40px',color:'#606266',fontWeight:'400',fontSize:'14px'}"
|
|
|
+ :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}" border stripe @selection-change="selectionChange" >
|
|
|
<el-table-column
|
|
|
type="selection"
|
|
|
width="35" fixed v-if="checkbox">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
+ show-overflow-tooltip
|
|
|
v-for="(col,index) in layout" :key="col.tablecolid"
|
|
|
:prop="col.columnname"
|
|
|
- :label="col.title"
|
|
|
+ :label="$t(col.title)"
|
|
|
:min-width="col.width || 150"
|
|
|
:fixed="fixedCalc(col.columnname)"
|
|
|
>
|
|
@@ -46,15 +48,17 @@ export default {
|
|
|
data () {
|
|
|
return {
|
|
|
list:[],
|
|
|
+ currentHoverRow: null,
|
|
|
+ currentHoverColumn: null
|
|
|
}
|
|
|
},
|
|
|
watch:{
|
|
|
- data(){
|
|
|
- console.log('执行了222')
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.table.doLayout()
|
|
|
- });
|
|
|
- }
|
|
|
+ // data(){
|
|
|
+ // console.log('执行了222')
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.$refs.table.doLayout()
|
|
|
+ // });
|
|
|
+ // }
|
|
|
},
|
|
|
computed:{
|
|
|
...mapGetters({
|
|
@@ -97,10 +101,17 @@ export default {
|
|
|
this.$emit('selectionChange',row)
|
|
|
},
|
|
|
headerDragend() {
|
|
|
- if (this.$refs.table && this.$refs.table.doLayout) {
|
|
|
+ console.log('执行111111')
|
|
|
+ if (this.$refs.table || this.$refs.table.doLayout) {
|
|
|
this.$refs.table.doLayout();
|
|
|
}
|
|
|
},
|
|
|
+ updateDataAndFixLayout(newData) {
|
|
|
+ this.data = newData;
|
|
|
+ if (this.$refs.table || this.$refs.table.doLayout) {
|
|
|
+ this.$refs.table.doLayout();
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
mounted () {
|
|
|
}
|
|
@@ -117,28 +128,39 @@ export default {
|
|
|
}
|
|
|
</style>
|
|
|
<style scoped>
|
|
|
-/*!* 设置滚动条常显示 *!*/
|
|
|
-/*>>>.el-table__body-wrapper {*/
|
|
|
-/* overflow: scroll;*/
|
|
|
-/*}*/
|
|
|
-/*!* 解决横向滚动条被固定列遮住的问题 *!*/
|
|
|
-/*>>>.el-table__fixed, >>>.el-table__fixed-right {*/
|
|
|
-/* height: calc(100% - 15px) !important;*/
|
|
|
-/*}*/
|
|
|
-/*!* 解决横向滚动条滑至最右时,列对不齐的问题 *!*/
|
|
|
-/*>>>.el-table__header-wrapper{*/
|
|
|
-/* padding-right: 15px !important;*/
|
|
|
-/*}*/
|
|
|
-/*!* 解决竖向滚动条被固定列遮住的问题 *!*/
|
|
|
-/*>>>.el-table__fixed-right {*/
|
|
|
-/* right: 15px !important;*/
|
|
|
-/*}*/
|
|
|
-/*!* 解决竖向滚动条滑至底部时,行对不齐的问题 *!*/
|
|
|
-/*>>>.el-table__fixed-body-wrapper .el-table__body {*/
|
|
|
-/* padding-bottom: 15px;*/
|
|
|
-/*}*/
|
|
|
-/*!* 解决滑动横向滚动条时,表头最右侧会露出其他列表头的内容,形成的“样式穿透”问题 *!*/
|
|
|
-/*>>>.el-table__fixed-right-patch {*/
|
|
|
-/* width: 15px !important;*/
|
|
|
-/*}*/
|
|
|
+
|
|
|
+/* 设置滚动条常显示 */
|
|
|
+>>>.el-table__body-wrapper {
|
|
|
+ overflow: scroll;
|
|
|
+}
|
|
|
+/* 修改横向滚动条高度和纵向滚动条宽度 */
|
|
|
+>>>.el-table .el-table__body-wrapper::-webkit-scrollbar {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+}
|
|
|
+/* 修改滚动条颜色 */
|
|
|
+>>>.el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #AAA;
|
|
|
+}
|
|
|
+/* 解决横向滚动条被固定列遮住的问题 */
|
|
|
+>>>.el-table__fixed, >>>.el-table__fixed-right {
|
|
|
+ height: calc(100% - 10px) !important;
|
|
|
+}
|
|
|
+/* 解决横向滚动条滑至最右时,列对不齐的问题 */
|
|
|
+>>>.el-table__header-wrapper{
|
|
|
+ padding-right: 10px !important;
|
|
|
+}
|
|
|
+/* 解决竖向滚动条被固定列遮住的问题 */
|
|
|
+>>>.el-table__fixed-right {
|
|
|
+ right: 10px !important;
|
|
|
+}
|
|
|
+/* 解决竖向滚动条滑至底部时,行对不齐的问题 */
|
|
|
+>>>.el-table__fixed-body-wrapper .el-table__body {
|
|
|
+ padding-bottom: 10px;
|
|
|
+}
|
|
|
+/* 解决滑动横向滚动条时,表头最右侧会露出其他列表头的内容,形成的“样式穿透”问题 */
|
|
|
+>>>.el-table__fixed-right-patch {
|
|
|
+ width: 10px !important;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|