Ao escrever um projeto recentemente, há um requisito como este: ao
comprar um projeto, você selecionou mais de dois funcionários (aqui, supondo que Zhang San e Li Si sejam dois funcionários), então, quando o desempenho ou comissão é calculado, Zhang Sanhe O Li Si precisa dividir o desempenho do projeto e o valor da comissão igualmente. Ao exibir, é necessário contar Zhang San e Li Si juntos, de modo que, quando um dos funcionários for modificado, o outro também será alterado. O diagrama de projeto é o seguinte:
Pode-se ver no diagrama de projeto que ao modificar o desempenho de vendas ou o valor da comissão de mb006 funcionários, é necessário alterar o desempenho de vendas ou a comissão total de outros funcionários no mesmo projeto (gt_test e mb005). E aqui está baseado no nome do projeto (reparo de pneus e enceramento 2223) para mesclar os dados dos funcionários. Os dados retornados em segundo plano são assim:
você pode ver que na verdade existem 5 dados retornados em segundo plano. Devido às restrições de armazenamento da tabela de dados de segundo plano, os desenvolvedores de segundo plano não podem integrar o desempenho dos funcionários do mesmo projeto. Por este motivo, apenas eu Essas 5 partes de dados podem ser convertidas nas 2 partes de dados semelhantes mostradas acima.
Este projeto está no lado do PC e a estrutura de front-end usada é vue, portanto, o componente el-table do ElementUI é usado diretamente para implementar o layout. Mas a mesclagem de componentes el-table só pode ser mesclada com base no número da linha. Vamos dar uma olhada no caso oficial primeiro:
você pode ver que o caso oficial é mesclar os dados de duas linhas a cada duas linhas, o que não atende totalmente ao requisito que desejamos mesclar de acordo com um determinado atributo, mas não sabemos quantos pedaços de dados existem. Vamos ver como usar isso primeiro:
Introdução oficial:
Você pode mesclar linhas ou colunas passando o método do método span para a tabela. O parâmetro do método é um objeto, que contém quatro atributos da linha da linha atual, a coluna da coluna atual, o número da linha atual rowIndex e o número da coluna atual columnIndex. Esta função pode retornar um array contendo dois elementos, o primeiro elemento representa rowspan e o segundo elemento representa colspan.
Você também pode retornar um objeto com chaves chamadas rowspan e colspan.
Se você é um pouco complicado, por favor, olhe para as seguintes castanhas:
if (columnIndex === 0) {
if (rowIndex === 0) {
// 合并第一行到第四行，从第一行开始，共4行
return {
rowspan: 4,
colspan: 1
}
} else if (rowIndex === 4) {
// 合并第五行到第九行，从第五行开始，共5行
return {
rowspan: 5,
colspan: 1
}
} else if (rowIndex === 9) {
// 合并第10行到第14行，从第10行开始，共5行
return {
rowspan: 5,
colspan: 1
}
} else {
// 其余被合并的行，诸如1、2、3、5、6、7、8、10、11、12、13全都设为0
return {
rowspan: 0,
colspan: 0
}
}
}
Você pode ver que rowspan significa quantas linhas de dados são mescladas.
Vamos começar com a ajuda de: span-method para atender aos requisitos. Antes de mesclar os dados, você precisa processar os dados e fazer upload direto do código:
// 核算业绩提成合并员工
// 生成一个与行数相同的数组，记录每一行设置的合并数
setMergeArr(data) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.mergeSpanArr.push(1)
this.mergeSpanArrIndex = 0
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].itemInfo === data[i - 1].itemInfo) {
//itemInfo代表根据哪个相同的属性去合并
this.mergeSpanArr[this.mergeSpanArrIndex] += 1
this.mergeSpanArr.push(0)
} else {
this.mergeSpanArr.push(1)
this.mergeSpanArrIndex = i
}
}
}
// 如果第一条记录索引为0，向数组中push 1，设置索引值
// 如果不是第一条记录，判断与前一条记录是否相等，相等则向mergeSpanArr添加元素0
// 且将前一条记录+1，即需要合并的行数+1，直到得到所有需要合并的行数
}
Uso final:
<el-table :data="recordList" :span-method="activementTable" border></tl-table>
//核算业绩表合并
activementTable({
row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1) {
const _row = this.mergeSpanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
}
Desta forma, ao mesclar dados, eles podem ser mesclados de acordo com um determinado atributo dos dados, ao invés de apenas de acordo com o número da linha como o oficial.
Vamos falar sobre como modificar a quantidade de um dos funcionários e outros funcionários do mesmo projeto após a mudança. Primeiro, olhe para o desenho do projeto:
caixa de entrada:
<el-input v-model.trim="scope.row.performance" @keyup.native="totalPayTypeMoney(scope.row,1)"></el-input> 元
O requisito aqui é modificar o valor das vendas ou valor da comissão de mb006 e alterar imediatamente o desempenho das vendas e o desempenho da comissão de mb005 e gt_test (o valor é (valor das vendas do projeto-mb006 desempenho das vendas) / (número de funcionários-1), o que significa que os funcionários restantes são divididos igualmente A quantidade restante). Diretamente no código:
//销售业绩-自动计算
totalPayTypeMoney(item, type) {
let singePrice //单个员工的业绩｜提成
let totalPrice //总业绩｜总提成
if (type == 1) {
//业绩
totalPrice = item.itemTotal
singePrice = item.performance
} else {
//提成
totalPrice = item.totalAmount
singePrice = item.commission
}
if (
isNaN(singePrice) ||
parseFloat(singePrice) > parseFloat(totalPrice)
) {
this.$message({
message: "请输入小于" + totalPrice + "的数字!",
type: "error"
})
//将当前修改的员工业绩｜提成置为总业绩｜总提成
if (type == 1) {
item.performance = totalPrice
} else {
item.commission = totalPrice
}
}
//算出剩下的业绩金额｜提成金额并根据几个员工均分
let surplusTotal = (parseFloat(totalPrice) - parseFloat(type == 1 ? item.performance || 0 : item.commission || 0)) / (this.getRealNum(item.index) - 1) //分配剩余的业绩或提成
this.recordList.forEach(val => {
if (val != item && val.itemInfo == item.itemInfo) {
//除去本身编辑的员工 val.itemInfo == item.itemInfo控制是均分金额的是同个项目的员工
if (type == 1) {
val.performance = parseFloat(surplusTotal).toFixed(2)
} else {
val.commission = parseFloat(surplusTotal).toFixed(2)
}
}
})
}
Este método serve para descobrir em quantas partes do valor restante são divididas ao encontrar mudanças no desempenho do funcionário:
//如果得到的是0 就一直往上找 直到找到有合并数
getRealNum(index) {
let num
if (this.mergeSpanArr[index] < 1) {
for (let i = index; i < this.mergeSpanArr.length; i--) {
if (i > -1 && this.mergeSpanArr[i] > 0) {
num = i
return this.mergeSpanArr[num]
}
}
} else {
return this.mergeSpanArr[index]
}
}
Bem, esse compartilhamento termina aqui. Se você vir este artigo e tiver que resolver o problema que deseja resolver, por favor, dê uma pequena estrela para apoiá-lo. Se você não entender ou não conseguir resolver o seu problema, você é sempre bem-vindo para encontrar e discutir juntos!
Meu WeChat: huang009516