销账,发票过长显示优化

This commit is contained in:
wuteng 2026-03-10 14:14:09 +08:00
parent 1004f2f2c4
commit 05269e44c3
3 changed files with 53 additions and 2 deletions

View File

@ -117,7 +117,19 @@
</template>
</el-table-column> -->
<el-table-column :label="$t('收款公司')" align="center" prop="recedCompanyName" min-width="100" />
<el-table-column :label="$t('发票号')" align="center" prop="invoiceNo" min-width="100" />
<el-table-column :label="$t('发票号')" align="center" prop="invoiceNo" min-width="100">
<template #default="scope">
<el-tooltip
:content="scope.row.invoiceNo"
placement="top"
effect="dark"
:disabled="!scope.row.invoiceNo || scope.row.invoiceNo.length <= 20"
>
<div class="table-text-ellipsis">{{ scope.row.invoiceNo }}</div>
</el-tooltip>
</template>
</el-table-column>
<el-table-column :label="$t('申请说明')" align="center" prop="applyMemo" min-width="100">
</el-table-column>
<el-table-column :label="$t('申请时间')" align="center" prop="applyDate" min-width="80">
@ -361,4 +373,10 @@ export default {
text-overflow: ellipsis;
vertical-align: top; white-space: nowrap;
}
.table-text-ellipsis {
white-space: nowrap; /* 强制不换行 */
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis; /* 超出显示省略号 */
width: 100%; /* 继承单元格宽度 */
}
</style>

View File

@ -40,7 +40,18 @@
<el-table-column :label="$t('产品类型')" align="center" prop="emisWaybill.productTypeName" min-width="100"></el-table-column>
<el-table-column :label="$t('件数')" align="center" prop="emisWaybill.parcelQty" min-width="100"> </el-table-column>
<el-table-column :label="$t('结算重量 ')" align="center" prop="emisWaybill.settlementWeight" min-width="100" />
<el-table-column :label="$t('发票号 ')" align="center" prop="invoiceNo" min-width="100" />
<el-table-column :label="$t('发票号 ')" align="center" prop="invoiceNo" min-width="100" >
<template #default="scope">
<el-tooltip
:content="scope.row.invoiceNo"
placement="top"
effect="dark"
:disabled="!scope.row.invoiceNo || scope.row.invoiceNo.length <= 20"
>
<div class="table-text-ellipsis">{{ scope.row.invoiceNo }}</div>
</el-tooltip>
</template>
</el-table-column>
<el-table-column :label="$t('收款状态 ')" align="center" prop="emisSettleSubBill.paymentStatus" min-width="100">
<template slot-scope="scope">
<!-- 收款状态 展示不同颜色的标签 -->
@ -206,4 +217,10 @@ export default {
color: #0955ee;
cursor: pointer;
}
.table-text-ellipsis {
white-space: nowrap; /* 强制不换行 */
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis; /* 超出显示省略号 */
width: 100%; /* 继承单元格宽度 */
}
</style>

View File

@ -112,6 +112,16 @@
<el-table-column :label="$t('销账日期')" align="center" prop="tradeDate" min-width="100">
</el-table-column>
<el-table-column :label="$t('发票号')" align="center" prop="invoiceNo" min-width="100">
<template #default="scope">
<el-tooltip
:content="scope.row.invoiceNo"
placement="top"
effect="dark"
:disabled="!scope.row.invoiceNo || scope.row.invoiceNo.length <= 20"
>
<div class="table-text-ellipsis">{{ scope.row.invoiceNo }}</div>
</el-tooltip>
</template>
</el-table-column>
<el-table-column :label="$t('图片')" align="center" prop="fileUrl" min-width="200">
<template slot-scope="scope">
@ -560,4 +570,10 @@ export default {
vertical-align: top;
white-space: nowrap;
}
.table-text-ellipsis {
white-space: nowrap; /* 强制不换行 */
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis; /* 超出显示省略号 */
width: 100%; /* 继承单元格宽度 */
}
</style>