vue+elementui实现：使用lodop打印当前dialog中的表格数据

在Vue.js中结合Element UI实现Lodop打印当前Dialog中的表格数据，需要几个步骤：

1. **安装依赖**:
首先确保已经在项目中安装了Vue、Element UI以及`lo-dop`库。如果没有安装，可以分别通过npm或yarn添加它们：

   npm install vue-element-ui lo-dop

2. **引入并注册Lodop**:
在main.js或者需要的地方引入Lodop，并全局注册：

   import LigerUI from 'ligerui';
   Vue.prototype.$lodop = LigerUI;

3. **创建表格数据**:
在你的组件内，假设有一个表格变量`tableData`存储了你需要打印的数据。

4. **渲染表格到Dialog**:
使用Element UI的Dialog组件，将表格数据展示在其中，例如：

   <el-dialog :visible.sync="dialogVisible" title="打印表格">
     <table ref="printTable">
       <!-- 根据实际数据动态生成表格 -->
     </table>
   </el-dialog>

5. **打印功能处理**:
当点击打印按钮时，在methods中编写打印函数，比如：

   methods: {
     printTable() {
       const dialogTable = this.$refs.printTable;
       // 获取表格节点
       const tableNode = dialogTable && dialogTable.querySelector('table');
       if (!tableNode) return;

       // 初始化Lodop并设置表格
       let printPreviewer = this.$lodop.createPrintPreviewer();
       printPreviewer.open();
       printPreviewer.setOption({
         pageContent: tableNode.outerHTML,
         printTitle: "打印标题",
       });
       printPreviewer.show();
     }
   },

这里设置了打印预览器打开，然后获取表格的HTML内容并设置为打印页的内容。

6. **控制Dialog显示和关闭**:
使用v-model绑定`dialogVisible`属性来控制Dialog是否可见。