Vue3 打印,合并单元格
一、npm i vue3-print-nb
1、按钮：
<el-button type="danger" v-print="printObj" icon="Star">交接并打印</el-button>
2、打印区域外边添加div
<div ref="printContent" id="printContent" class="print">
<!--打印区域 -->
</div>
3、参数
let printObj = reactive({
id:"printContent",// 绑定打印区域id
popTitle:"标签",// 内容标签
zIndex:20002,
// 打印成功之后执行其他方法
openCallback(){
handleSubmit()
}
})
4、集合中包含某个参数（true,false）
let obj =setNames.value.includes(s.setName)
5、合并单元格
// 合并的字段名
const colFields=['dispatchTaskType','customerName','branchName']
// 表格数据，表格字段
setTableRowSpan(tableData.value,colFields)
6、设置合并的行和列
const setTableRowSpan = (tableData:any,colFields:any) =>{
let lastItem:any = []
// 循环需要合并的列
colFields.forEach((field:any, index:any) =>{
tableData.forEach((item:any) =>{
// 存值，把合并字段存入行，为了合并单元格时检索列是否含有该字段
item.mergeCell = colFields
// 合并的字段出现的次数
const rowSpan = `rowspan_${field}`
// 比较上一次的存值和该轮的合并字段，判断是否合并到上个单元格
if( colFields.slice(0,index + 1).every(e =>lastItem[e] === item[e] )){
// 如果是，合并行；
item[rowSpan] = 0 // 该轮合并字段数量存0
// 上轮合并字段数量+1
lastItem[rowSpan] +=1
}else{
//初始化进入&& 如果不是，完成一次同类合并，lastItem重新赋值，进入下一次计算
item[rowSpan] = 1 // 该轮合并字段第一次出现，数量存1
// 改变比较对象，重新赋值，进行下一次计算
lastItem = item
}
})
})
}
7、合并单元格
const objectSpanMethod = ({row, column, rowIndex, columnIndex}) => {
let cell = row.mergeCell
if(cell !=null){
if(cell.includes(column.property)){
const rowspan = row[`rowspan_${column.property}`]
if(rowspan){
return { rowspan:rowspan, colspan:1}
}else {
return { rowspan:0, colspan:0}
}
}
}
}
8、多个集合合并
let box = [...JSON.parse(JSON.stringify(existObj[0].firstBox)),...JSON.parse(JSON.stringify(existObj[0].secondBox)),...JSON.parse(JSON.stringify(existObj[0].thirdBox))]
9、集合分三份
const firstPart = box.filter((num) =>{
let index =box.indexOf(num)
return index % 3 === 0});
const secondPart = box.filter((num) =>{
let index =box.indexOf(num)
return index % 3 === 1});
const thirdPart = box.filter((num) =>{
let index =box.indexOf(num)
return index % 3 === 2});
existObj[0].firstBox = firstPart
existObj[0].secondBox = secondPart
existObj[0].thirdBox = thirdPart
existObj[0].boxCount ++
// 下标
let index = tableData.value.indexOf(existObj[0]);
// 先删除再添加
tableData.value.splice(index,1);
tableData.value.splice(index,0,existObj[0]);
10、选择集合中符合条件的数据
let obj = arr.filter((i:any) =>{return i.taskType == commonStore.dispatchTaskType.lateTask})
11、删除单个数据
@confirm="handleDelete(item,scope.row,scope.column)"
// 款箱删除，后台直接删除
const handleDelete = (item:any,data:any,column:any) => {
let col = column.property;
if(col === "firstBox"){
// 是否存在
let index = data.firstBox.indexOf(item);
if(index !== -1){
// 删除
data.firstBox.splice(index,1);
data.boxCount--
personInfo.value.totalCount--
}
} else if(col === "secondBox"){
let index = data.secondBox.indexOf(item);
if(index !== -1){
data.secondBox.splice(index,1);
data.boxCount--
personInfo.value.totalCount--
}
}else if(col === "thirdBox"){
let index = data.thirdBox.indexOf(item);
if(index !== -1){
data.thirdBox.splice(index,1);
data.boxCount--
personInfo.value.totalCount--
}
}
let box =[...JSON.parse(JSON.stringify(data.firstBox)),...JSON.parse(JSON.stringify(data.secondBox)),...JSON.parse(JSON.stringify(data.thirdBox))]
let count = box.length;
// 没有数据直接删除当前行
if(count === 0){
let dataIndex = tableData.value.indexOf(data);
tableData.value.splice(dataIndex,1);
}
ElMessage.success("删除成功")
}
