Página de detalles de Vue el-row el-col hace que el efecto de estilo de palabra y la impresión (element-ui)

Escenas:

        La empresa proporcionó un documento de Word y luego dijo que el front-end puede ver el estilo como un documento e imprimirlo.

Toma nota:

         La página de detalles del estilo de tabla de palabras de element-ui está impresa en la página de vue Para obtener contenido más detallado, puede consultar el texto original de los siguientes dos artículos.

Artículo de referencia de estilo:

elementUI vista personalizada detalles componente_elemento ui página de detalles_Three-Line Coder's Blog-CSDN Blog

Imprimir artículos de referencia:

En el proyecto Vue, exporte el componente de la tabla a la tabla de Excel e imprima el contenido de la página | exportar

Consulte las siguientes páginas:

 código:

<template>
      <el-dialog  :visible.sync="visible" :append-to-body="true"  width="50%"  lock-scroll :close-on-click-modal="false">
         <div style="width:90%;padding-left:15px;height:100%;margin-bottom: 20px;" id="printContent">

          <!-- 样式参考 https://blog.csdn.net/qq_35946021/article/details/125746634 -->
            <h2 style="text-align:center">亲爱的热爱的</h2>

            <el-row style="margin-bottom:10px;">
               <span>编号：{
   
   {data.id }}</span>
               <span style="float:right">{
   
   {  data.year}}年{
   
   { data.month }}月{
   
   {data.month}}日</span>
            </el-row>
            
            <el-row>
                <el-col :span="12" class="col"><div class="title">女演员</div><div class="val">{
   
   {data.name}}</div></el-col>      
                <el-col :span="12" class="col"><div class="title">性别</div><div class="val">{
   
   {data.gender=='0'?'男':'女'}}</div></el-col>      
            </el-row>

            <el-row>
                <el-col :span="12" class="col"><div class="title">出生日期</div><div class="val">{
   
   {data.birthday}}</div></el-col>      
                <el-col :span="12" class="col"><div class="title">联系电话</div><div class="val">{
   
   {data.mobile}}</div></el-col>      
            </el-row>

            <el-row>
                <el-col :span="24" class="col"><div class="title">角色名</div><div class="val"><span style="color:red;">❤</span>佟年<span style="color:red;">❤</span>我好喜欢佟年，软萌佟年爱一生<span style="color:red;">❤</span></div></el-col>      
            </el-row>

            <el-row>
                <el-col :span="12" class="col"><div class="title">男演员</div><div class="val">{
   
   {data.name1}}</div></el-col>      
                <el-col :span="12" class="col"><div class="title">性别</div><div class="val">{
   
   {data.gender1=='0'?'男':'女'}}</div></el-col>      
            </el-row>

            <el-row>
                <el-col :span="12" class="col"><div class="title">出生日期</div><div class="val">{
   
   {data.birthday1}}</div></el-col>      
                <el-col :span="12" class="col"><div class="title">联系电话</div><div class="val">{
   
   {data.mobile1}}</div></el-col>      
            </el-row>

            <el-row>
                <el-col :span="24" class="col"><div class="title">角色名</div><div class="val"><span style="color:red;">❤</span>韩商言<span style="color:red;">❤</span>表白一下韩商言,kk战队也喜欢<span style="color:red;">❤</span></div></el-col>      
            </el-row>

            <el-row >
              <el-col  class="col"><div class="title">简介</div><div class="val" style="line-height:18px;"><span style="color:pink;">❤❤❤</span>{
   
   {data.content}}</div></el-col>      
            </el-row>
         </div>

         <span slot="footer">
           <el-button type="primary" icon="el-icon-printer" @click="printPage">打印</el-button>
         </span>

       </el-dialog>
</template>


<script>
export default {
  data() {
    return {
      visible:false,
      data:{
        id:'201907090123232320',
        year:'2019',
        month:'7',
        day:'9',
        name:'杨紫',
        gender:'1',
        birthday:'1992年11月6日',
        mobile:'15888888888',

        name1:'李现',
        gender1:'0',
        birthday1:'1991年10月19日',
        mobile1:'15666666666',

        content:'该剧根据墨宝非宝小说《蜜汁炖鱿鱼》改编，讲述软萌少女佟年对热血青年韩商言一见钟情，二人在相处中甜蜜碰撞，上演一场高智商与高情商的甜萌梦幻爱情故事......',

      }
    };
  },
  methods: {
    init() {
       this.visible = true;
      
    },
    printPage(){
      let wpt = document.querySelector('#printContent');
      let newContent = wpt.innerHTML;
      let oldContent = document.body.innerHTML;

      document.body.innerHTML = newContent;

      window.print(); //打印方法
      history.go(0);

      document.body.innerHTML = oldContent;
    },
    
  },
 
};
</script>
<style scoped lang="scss">
/deep/ .el-dialog__footer{
  height:70px;
  margin-top:15px;
}

.col{
    // border: 1px solid #e6e9f0;
    border: 1px solid #000000;
    height:55px;
    line-height: 55px;
    display: flex;
    
    div{
        padding-left:20px;
    }
    .title{
        // min-width: 150px;
        min-width: 85px;
        // background-color: #f5f5f5; //title的背景色
        // color: #1F2E4D;
        color:#000000;
    }
    .val{
        flex: 1;
        // border-left: 1px solid #e6e9f0;
        border-left: 1px solid #000000;
        // color: #3D4966;
        color:#000000;
    }
}
 
</style>

Si el contenido de dos campos en una línea es muy largo, puede agregar un estilo por separado

<div class="val" style="desbordamiento: oculto;desbordamiento-y: auto;" >