首页 新闻 会员 周边

如何修改打印格式

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 | 园豆：5724 (大侠五级) | 2023-07-23 23:12
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。