v-print v-for打印时只展示for循环的第一个元素解决方案

最新推荐文章于 2024-04-26 16:47:03 发布

写BUG的码农蕾

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.2k

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_38257149/article/details/126180870

版权

     <el-dialog title="打印"  :visible="dialogJISVisible_hot" :close-on-click-modal = "false">
            <div id="rmz_PrintID" v-for="(dialogData,index) in dialogDataList" :key="index" >
              <div>
                  <table>
                      <tr>
                          <td>{{dialogData.col1}}</td>
                          <td>{{dialogData.col2}}</td>
                      </tr>
                      <tr>
                          <td>11</td>
                          <td>22</td>
                      </tr>
                  </table>
              </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <div class="footerbutton">
                    <el-button type="primary" @click="surePrint_hot">确定打印</el-button>
                    <el-button type="primary" v-print="printObj_hot" name="print" class="print" ref="print"></el-button>
                    <el-button @click="closedialog">关闭</el-button>
                </div>
            </div>
        </el-dialog>

data变量 v-print 里的ID对应DIV的ID

         printObj_hot: {
                    id: 'rmz_PrintID',
                    popTitle: '打印',
                   
                },

解决方案：

查文档发现v-print取值方式是取得 ID为rmz_PrintID的所有内容

将循环放在rmz_PrintID里面就OK了

     <el-dialog title="打印"  :visible="dialogJISVisible_hot" :close-on-click-modal = "false">
            <div id="rmz_PrintID" >
              <div v-for="(dialogData,index) in dialogDataList" :key="index" >
                  <table>
                      <tr>
                          <td>{{dialogData.col1}}</td>
                          <td>{{dialogData.col2}}</td>
                      </tr>
                    
                      <tr>
                          <td>11</td>
                          <td>22</td>
                      </tr>
                  </table>
              </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <div class="footerbutton">
                    <el-button type="primary" @click="surePrint_hot">确定打印</el-button>
                    <el-button type="primary" v-print="printObj_hot" name="print" class="print" ref="print"></el-button>
                    <el-button @click="closedialog">关闭</el-button>
                </div>
            </div>
        </el-dialog>