[JavaScript知识库]vue项目中vxe-table火狐浏览器打印样式表格框线丢失

声明在data里面的样式

tablePrint: {

// 自定义打印的样式示例

style: `

? ? ? ? ?.vxe-table {

? ? ? ? ? ? ? ? color: #000000; // 修改表格默认颜色

? ? ? ? ? ? ? ? font-size: 12px; // 修改表格默认字体大小

? ? ? ? ? ? ? ? font-family: "Microsoft YaHei",微软雅黑,

? ? ? ? ? ? ? ?"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu; // 修改表格默认字体

? ? ? ? ? ? ? ? //border-collapse:collapse;//火狐不兼容

? ? ? ? ? ? ? ??border-collapse: unset;

? ? ? ? ? ?}

? ? ? ? ? .vxe-table,

? ? ? ? ?.vxe-table thead th,

? ? ? ? ?.vxe-table tbody td,

? ? ? ? ?.vxe-table tfoot td {

? ? ? ? ? ? ? ? ? ? ? ? ?border-color: #000000; // 修改表格边框颜色

? ? ? ? ?}

? ? ? ? .vxe-table thead th {

? ? ? ? ? ? ? ? ? ? ? ?color: green; // 修改表头字体颜色

? ? ? ? ? ? ? ? ? ? ? ?font-size: 14px; // 修改表头默认字体大小

? ? ? ? }

? ? ? ?.vxe-table tfoot td { color: red; // 修改表尾字体颜色 } `

}

但是这种打印样式会在火狐浏览器上，表格框线丢失

需要把 border-collapse:collapse; 改为border-collapse: unset;