feat:所有列表添加调整列宽功能

This commit is contained in:
wangwenrui
2020-11-04 15:38:34 +08:00
parent 82367d6df2
commit 7ab9ed81f7
17 changed files with 21 additions and 35 deletions

View File

@@ -819,6 +819,7 @@ li{
.nz-table .el-table { .nz-table .el-table {
border: none; border: none;
font-size: 12px; font-size: 12px;
display: table-cell!important;
} }
.nz-table::before { .nz-table::before {
height: 0; height: 0;

View File

@@ -93,7 +93,7 @@
v-scrollBar:el-table="'small'" v-scrollBar:el-table="'small'"
> >
<el-table-column <el-table-column
:resizable="false" :resizable="true"
v-for="(_item, _index) in setLabels(value)" v-for="(_item, _index) in setLabels(value)"
v-if="_item.show" v-if="_item.show"
:key="`col-${_index}`" :key="`col-${_index}`"

View File

@@ -39,11 +39,9 @@
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
:resizable="false" :resizable="true"
v-for="(item, index) in tools.customTableTitle" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width"
:minWidth="item.minWidth"
:key="`col-${index}`" :key="`col-${index}`"
:label="item.label" :label="item.label"
:show-overflow-tooltip="item.prop != 'labels' && item.prop != 'alertRule'" :show-overflow-tooltip="item.prop != 'labels' && item.prop != 'alertRule'"
@@ -156,7 +154,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="28" :resizable="false"> <el-table-column width="28" :resizable="true">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear"> <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>

View File

@@ -35,10 +35,9 @@
align="center"> align="center">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
:resizable="false" :resizable="true"
v-for="(item, index) in tableTitle" v-for="(item, index) in tableTitle"
v-if="item.show" v-if="item.show"
:width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
:label="item.label" :label="item.label"
> >

View File

@@ -59,13 +59,11 @@
align="center"> align="center">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
:resizable="false" :resizable="true"
v-for="(item, index) in tools.customTableTitle" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
:label="item.label" :label="item.label"
:min-width="(item.minWidth?item.minWidth+'px':'110px')"
:sortable="$tableSet.sortableShow(item.prop,'endpointTab')" :sortable="$tableSet.sortableShow(item.prop,'endpointTab')"
:prop="$tableSet.propTitle(item.prop,'endpointTab')" :prop="$tableSet.propTitle(item.prop,'endpointTab')"
:sort-orders="['ascending', 'descending']" :sort-orders="['ascending', 'descending']"

View File

@@ -55,7 +55,7 @@
<!--&gt;--> <!--&gt;-->
<!--</el-table-column>--> <!--</el-table-column>-->
<el-table-column <el-table-column
:resizable="false" :resizable="true"
v-for="(item, index) in tableTitle" v-for="(item, index) in tableTitle"
v-if="item.show" v-if="item.show"
:width="item.width" :width="item.width"

View File

@@ -45,7 +45,7 @@
@sort-change="tableDataSort" @sort-change="tableDataSort"
> >
<el-table-column <el-table-column
:resizable="false" :resizable="true"
v-for="(item, index) in tableTitle" v-for="(item, index) in tableTitle"
v-if="item.show" v-if="item.show"
:width="item.width" :width="item.width"

View File

@@ -85,14 +85,12 @@
align="center"> align="center">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
:resizable="false" :resizable="true"
v-for="(item, index) in tools.customTableTitle" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
:label="item.label" :label="item.label"
show-overflow-tooltip show-overflow-tooltip
min-width="110px"
:sort-orders="['ascending', 'descending']" :sort-orders="['ascending', 'descending']"
:sortable="$tableSet.sortableShow(item.prop,'alertRules')" :sortable="$tableSet.sortableShow(item.prop,'alertRules')"
:prop="$tableSet.propTitle(item.prop,'alertRules')" :prop="$tableSet.propTitle(item.prop,'alertRules')"

View File

@@ -54,15 +54,13 @@
align="center"> align="center">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
:resizable="false" :resizable="true"
v-for="(item, index) in tools.customTableTitle" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width"
:key="`col_${index}`" :key="`col_${index}`"
:label="item.label" :label="item.label"
:fixed="item.fixed" :fixed="item.fixed"
:show-overflow-tooltip="item.prop != 'Alert' || item.prop != 'Module'" :show-overflow-tooltip="item.prop != 'Alert' || item.prop != 'Module'"
min-width="110px"
:class-name="item.prop == 'option' ? 'content-right-options' : ''" :class-name="item.prop == 'option' ? 'content-right-options' : ''"
:sortable="$tableSet.sortableShow(item.prop,'asset')" :sortable="$tableSet.sortableShow(item.prop,'asset')"
:prop="$tableSet.propTitle(item.prop,'asset')" :prop="$tableSet.propTitle(item.prop,'asset')"

View File

@@ -53,10 +53,9 @@
align="center"> align="center">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
:resizable="false" :resizable="true"
v-for="(item, index) in tools.customTableTitle" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
:label="item.label" :label="item.label"
:prop="item.prop" :prop="item.prop"

View File

@@ -53,11 +53,10 @@
align="center"> align="center">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
:resizable="false" :resizable="true"
show-overflow-tooltip show-overflow-tooltip
v-for="(item, index) in tools.customTableTitle" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
:label="item.label" :label="item.label"
:sortable="$tableSet.sortableShow(item.prop,'dc')" :sortable="$tableSet.sortableShow(item.prop,'dc')"

View File

@@ -45,7 +45,7 @@
width="40" width="40"
align="center"> align="center">
</el-table-column> </el-table-column>
<el-table-column :resizable="false" v-for="(item, index) in tools.customTableTitle" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''" <el-table-column :resizable="true" v-for="(item, index) in tools.customTableTitle" v-if="item.show" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
:key="`col-${index}`" :label="item.label" :sortable="$tableSet.sortableShow(item.prop,'mib')" :key="`col-${index}`" :label="item.label" :sortable="$tableSet.sortableShow(item.prop,'mib')"
:prop="$tableSet.propTitle(item.prop,'mib')" :prop="$tableSet.propTitle(item.prop,'mib')"
:sort-orders="['ascending', 'descending']"> :sort-orders="['ascending', 'descending']">

View File

@@ -49,10 +49,9 @@
width="40" width="40"
align="center"> align="center">
</el-table-column> </el-table-column>
<el-table-column :resizable="false" <el-table-column :resizable="true"
v-for="(item, index) in tools.customTableTitle" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
:label="item.label" :label="item.label"
:sortable="$tableSet.sortableShow(item.prop,'model')" :sortable="$tableSet.sortableShow(item.prop,'model')"

View File

@@ -36,10 +36,9 @@
@sort-change="tableDataSort" @sort-change="tableDataSort"
> >
<el-table-column <el-table-column
:resizable="false" :resizable="true"
v-for="(item, index) in tools.customTableTitle" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
:label="item.label" :label="item.label"
:sortable="$tableSet.sortableShow(item.prop,'operationlog')" :sortable="$tableSet.sortableShow(item.prop,'operationlog')"

View File

@@ -41,9 +41,8 @@
width="40" width="40"
align="center"> align="center">
</el-table-column> </el-table-column>
<el-table-column :resizable="false" v-for="(item, index) in tools.customTableTitle" <el-table-column :resizable="true" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
:label="item.label" :label="item.label"
:sortable="$tableSet.sortableShow(item.prop,'promServer')" :sortable="$tableSet.sortableShow(item.prop,'promServer')"

View File

@@ -35,10 +35,9 @@
style="width: 100%;" style="width: 100%;"
@sort-change="tableDataSort"> @sort-change="tableDataSort">
<el-table-column <el-table-column
:resizable="false" :resizable="true"
v-for="(item, index) in tools.customTableTitle" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
:label="item.label" :label="item.label"
:sortable="$tableSet.sortableShow(item.prop,'temrminallog')" :sortable="$tableSet.sortableShow(item.prop,'temrminallog')"

View File

@@ -68,6 +68,7 @@
@sort-change="tableDataSort" @sort-change="tableDataSort"
@row-dblclick="detailEndpoint" @row-dblclick="detailEndpoint"
@selection-change="(selection)=>{this.batchDeleteObjs=selection}" @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
@header-dragend="()=>{this.$refs.endpointTable.doLayout();}"
> >
<el-table-column <el-table-column
:resizable="false" :resizable="false"
@@ -76,13 +77,12 @@
align="center"> align="center">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
:resizable="false" :resizable="true"
v-for="(item, index) in tools.customTableTitle" v-for="(item, index) in tools.customTableTitle"
v-if="item.show" v-if="item.show"
:width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
:label="item.label" :label="item.label"
min-width="110px" :min-width="item.width"
:sortable="$tableSet.sortableShow(item.prop,'project')" :sortable="$tableSet.sortableShow(item.prop,'project')"
:prop="$tableSet.propTitle(item.prop,'project')" :prop="$tableSet.propTitle(item.prop,'project')"
:sort-orders="['ascending', 'descending']" :sort-orders="['ascending', 'descending']"
@@ -132,7 +132,7 @@
<template v-else>-</template> <template v-else>-</template>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="28" :resizable="false"> <el-table-column width="28" :resizable="true">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear"> <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>