首页 新闻 会员 周边 捐助

如何修改打印格式

0
悬赏园豆:10 [已解决问题] 解决于 2023-07-24 09:29

1.如何设置工程名称靠左于表格左边线对齐,编号与右边线对齐.
2.打印表头字体颜色和其他字体颜色不符,表头太浅.  

3.表格表头第一行右侧有多余框线;

此些问题哪位大神赐教一下  感谢啦

 

打印格式代码

@media print{
.list_titles-right{
float: right;
}
.list{
width: 1030px;
}
.list-table{
width: 1980px;
}
/deep/.el-table{
width: 98%;
.el-table__header-wrapper table,.el-table__body-wrapper table{
width: 52% !important;
}
.el-table__body, .el-table__footer, .el-table__header{
table-layout: auto;
}
// .el-table--border th.gutter:last-of-type{
// width: 0px !important;
// }
}
#ylt_homePrint{
overflow-x:hidden !important;
}
#ylt_homePrint .list_title, .main .list_title{
margin: 52px 33% !important;
}
#ylt_homePrint .list_titles, .main .list_titles{
width: 70% !important;
margin: 0 1%;
}
#ylt_homePrint .list, .main .list{
margin: 15px 2% 0px !important;
}
}

 

工程名称及编号代码

<div class="list_titles">
<div class="list_titles-left">
工程名称:{{ list.cisSmSubcontractReport.singleProjectName }}
</div>
<div class="list_titles-right">
编号:{{ list.cisSmSubcontractReport.reportNo }}
</div>
</div>



表头代码

<div class="list-table">
<el-table :data="list.list" border style="width: 100%">
<el-table-column
prop="subcontractType"
label="分包形式"
align="center"
:formatter="forms"
>
</el-table-column>
<el-table-column
prop="subcontractScopeName"
label="分包范围"
align="center"
>
</el-table-column>
<el-table-column
prop="constructionPlace"
label="工程地点"
align="center"
>
</el-table-column>
<el-table-column
prop="planStartDate"
label="计划开始时间"
:formatter="dateFormatter"
align="center"
>
</el-table-column>
<el-table-column
prop="planCompleteDate"
label="计划结束时间"
align="center"
:formatter="dateFormatter"
>
</el-table-column>
<el-table-column
prop="subcAmount"
label="拟分包额(万元)"
align="center"
>
</el-table-column>
<el-table-column
prop="proportion"
label="分包占工程比例"
align="center"
>
<template slot-scope="scope">
<div>{{ scope.row.proportion }}%</div>
</template>
</el-table-column>
</el-table>
</div>

码一码ba的主页 码一码ba | 初学一级 | 园豆:152
提问于:2023-07-21 10:31
< >
分享
最佳答案
0
  1. 要实现工程名称靠左对齐,编号靠右对齐,可以按照以下步骤进行设置:
  • 在工程名称和编号的外层容器div中,添加对应的CSS类名。例如,将工程名称容器的class设置为engineer-name,将编号容器的class设置为enginner-number
  • 在CSS样式代码中,添加对应的样式规则来对齐工程名称和编号。可以使用flexbox布局来实现:
.list_titles {
  display: flex;
  justify-content: space-between;
}

.engineer-name {
  text-align: left;
}

.engineer-number {
  text-align: right;
}
  1. 如果表头的字体颜色太浅,你可以通过在CSS样式代码中添加以下样式规则来修改表头的字体颜色:
.el-table__header th {
  color: #000; /* 设置表头字体颜色为黑色 */
}
  1. 关于表格表头第一行右侧有多余的框线,可以尝试通过以下方式解决:
  • 在CSS样式代码的.el-table__header th选择器中,添加border-right: none;样式规则来移除表头单元格的右侧边框线。
  • 在CSS样式代码的.el-table__header-wrapper选择器中,添加overflow-x: hidden;样式规则来隐藏表头水平滚动条,以避免出现多余的边框线。

希望这些解决方案对你有帮助!如果还有其他问题,请随时提问。

收获园豆:5
小九九呀 | 菜鸟二级 |园豆:383 | 2023-07-21 14:59

修改后的代码如下:

@media print {
  .list_titles-right {
    float: right;
  }
  .list {
    width: 1030px;
  }
  .list-table {
    width: 1980px;
  }
  /deep/ .el-table {
    width: 98%;
  }
  .el-table__header-wrapper table,
  .el-table__body-wrapper table {
    width: 52% !important;
  }
  .el-table__body,
  .el-table__footer,
  .el-table__header {
    table-layout: auto;
  }
  /*.el-table--border th.gutter:last-of-type{
    width: 0px !important;
  }*/
  #ylt_homePrint {
    overflow-x: hidden !important;
  }
  #ylt_homePrint .list_title,
  .main .list_title {
    margin: 52px 33% !important;
  }
  #ylt_homePrint .list_titles,
  .main .list_titles {
    width: 70% !important;
    margin: 0 1%;
  }
  #ylt_homePrint .list,
  .main .list {
    margin: 15px 2% 0px !important;
  }
}

.list_titles {
  display: flex;
  justify-content: space-between;
}

.list_titles-left {
  text-align: left;
}

.list_titles-right {
  text-align: right;
}

.list-table thead tr th {
  color: #000000; /* 修改表头字体颜色为黑色 */
}

修改工程名称及编号代码:

<div class="list_titles">
  <div class="list_titles-left">
    工程名称:{{ list.cisSmSubcontractReport.singleProjectName }}
  </div>
  <div class="list_titles-right">
    编号:{{ list.cisSmSubcontractReport.reportNo }}
  </div>
</div>

修改表头代码:

<div class="list-table">
  <el-table :data="list.list" border style="width: 100%">
    <el-table-column prop="subcontractType" label="分包形式" align="center" :formatter="forms"></el-table-column>
    <el-table-column prop="subcontractScopeName" label="分包范围" align="center"></el-table-column>
    <el-table-column prop="constructionPlace" label="工程地点" align="center"></el-table-column>
    <el-table-column prop="planStartDate" label="计划开始时间" :formatter="dateFormatter" align="center"></el-table-column>
    <el-table-column prop="planCompleteDate" label="计划结束时间" align="center" :formatter="dateFormatter"></el-table-column>
    <el-table-column prop="subcAmount" label="拟分包额(万元)" align="center"></el-table-column>
    <el-table-column prop="proportion" label="分包占工程比例" align="center">
      <template slot-scope="scope">
        <div>{{ scope.row.proportion }}%</div>
      </template>
    </el-table-column>
  </el-table>
</div>

修改说明:

  1. 设置工程名称靠左于表格左边线对齐,编号与右边线对齐,使用了 Flex 布局,并通过样式设置文本对齐方式。
  2. 通过修改 CSS,将表头字体颜色改为黑色,以解决与其他字体颜色不符的问题。
  3. 修复了表格表头第一行右侧多余的框线问题,通过修改表头样式来解决。
小九九呀 | 园豆:383 (菜鸟二级) | 2023-07-21 15:01
其他回答(1)
0

好的,让我用中文来回答你的问题:

如何设置工程名称靠左于表格左边线对齐,编号与右边线对齐?
你可以使用CSS来控制工程名称和编号的对齐方式。在你的CSS样式中添加以下代码:

css
Copy code
.list_titles {
display: flex;
justify-content: space-between;
}

.list_titles-left {
align-self: flex-start;
}

.list_titles-right {
align-self: flex-end;
}
这样工程名称将靠左对齐,编号将靠右对齐。

打印表头字体颜色和其他字体颜色不符,表头太浅。
为了改变表头的字体颜色,你可以给表头添加一个特定的class,并在CSS样式中设置字体颜色,代码如下:

html
Copy code
<el-table-column
prop="subcontractType"
label="分包形式"
align="center"
:formatter="forms"
class="header-column"

</el-table-column>
<!-- 如果需要,还可以在其他表格列中添加 "header-column" class -->
css
Copy code
/* 用于目标表头字体颜色的CSS样式 */
.header-column .cell {
color: 你想要的颜色;
}
表格表头第一行右侧有多余框线。
要移除表格表头第一行右侧的多余框线,可以设置 .el-table__header 类的 border-collapse 属性为 collapse,代码如下:

css
Copy code
.el-table__header {
border-collapse: collapse;
}
通过这些修改,你的打印格式应该能够满足你的要求:工程名称靠左,编号靠右,表头字体颜色和其他字体颜色一致,以及去除表头第一行右侧的多余框线。请将CSS样式中的 "你想要的颜色" 替换为你想要的表头字体颜色。

收获园豆:5
Technologyforgood | 园豆:7633 (大侠五级) | 2023-07-23 23:12
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册