최근 프로젝트를 작성할 때 다음과 같은 요구 사항이 있습니다.
프로젝트를 구매할 때 두 명 이상의 직원을 선택하고 (여기서는 Zhang San과 Li Si가 두 명의 직원이라고 가정) 성과 또는 수수료를 계산할 때 Zhang Sanhe Li Si는 프로젝트의 성과와 수수료 금액을 균등하게 나누어야하며, 전시 할 때 장산과 Li Si를 함께 세어 직원 중 하나의 성과가 수정되면 다른 하나도 변경됩니다. 설계도는 다음과 같다.
설계도를 보면 mb006 종업원의 매출 실적 또는 수수료 금액을 수정할 때 동일한 프로젝트 (gt_test 및 mb005)에 속한 다른 종업원의 매출 실적 또는 총 수수료를 변경해야 함을 알 수있다. 그리고 여기는 직원 데이터를 병합하기위한 프로젝트 이름 (타이어 수리 및 왁싱 2223)을 기반으로합니다. 백그라운드에서 반환 된 데이터는 다음과 같습니다.
실제로 백그라운드에서 반환 된 데이터는 5 개입니다. 백그라운드 데이터 테이블의 저장 제한으로 인해 백그라운드 개발자는 동일한 프로젝트의 직원의 성과를 통합 할 수 없습니다. 이 5 개의 데이터는 위에 표시된 유사한 2 개의 데이터로 변환 될 수 있습니다.
이 프로젝트는 PC 측에 있으며 사용 된 프런트 엔드 프레임 워크는 vue이므로 ElementUI의 el-table 구성 요소를 직접 사용하여 레이아웃을 구현합니다. 그러나 el-table 구성 요소의 병합은 행 번호를 기준으로 만 병합 할 수 있습니다. 공식적인 경우를 먼저 살펴 보겠습니다
. 공식적인 경우는 두 행마다 두 행의 데이터를 병합하는 것이므로 특정 속성에 따라 병합하려는 요구 사항을 완전히 충족하지 못하지만 데이터가 몇 개인 지 알 수 없습니다. 먼저 이것을 사용하는 방법을 살펴 보겠습니다.
공식 소개 :
스팬 메소드를 테이블에 전달하여 행 또는 열을 병합 할 수 있습니다. 메소드의 매개 변수는 현재 행 행, 현재 열 열, 현재 행 번호 rowIndex 및 현재 열 번호 columnIndex의 네 가지 속성을 포함하는 객체입니다. 이 함수는 두 요소를 포함하는 배열을 반환 할 수 있습니다. 첫 번째 요소는 rowspan을 나타내고 두 번째 요소는 colspan을 나타냅니다.
rowspan 및 colspan이라는 키가있는 객체를 반환 할 수도 있습니다.
조금 복잡하다면 다음 밤을보세요.
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
}
}
}
rowspan은 병합 된 데이터 행 수를 의미합니다.
요구 사항을 충족하기 위해 : span-method의 도움으로 시작하겠습니다. 데이터를 병합하기 전에 데이터를 처리하고 코드를 직접 업로드해야합니다.
// 核算业绩提成合并员工
// 生成一个与行数相同的数组，记录每一行设置的合并数
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，直到得到所有需要合并的行数
}
최종 사용 :
<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
}
}
}
이런 식으로 데이터를 병합 할 때 공무원처럼 라인 번호에 따라서 만 병합하는 것이 아니라 데이터의 특정 속성에 따라 병합 할 수 있습니다.
변경 후 동일한 프로젝트의 직원 중 한 명과 다른 직원의 금액을 수정하는 방법에 대해 이야기 해 보겠습니다. 먼저 설계 도면을보십시오 :
입력 상자 :
<el-input v-model.trim="scope.row.performance" @keyup.native="totalPayTypeMoney(scope.row,1)"></el-input> 元
여기서 요구 사항은 mb006의 매출액 또는 커미션 금액을 수정하고 즉시 mb005 및 gt_test의 매출 성과 및 커미션 성과를 변경하는 것입니다 (값은 (프로젝트 매출액 -mb006 매출 성과) / (직원 수 -1), 이는 나머지 직원이 균등하게 나눠 짐을 의미합니다. 남은 금액). 코드에 직접 :
//销售业绩-自动计算
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)
}
}
})
}
이 방법은 직원 성과에 대한 변경 사항을 찾을 때 남은 금액의 공유 수를 알아내는 것입니다.
//如果得到的是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]
}
}
이 공유는 여기서 끝납니다.이 기사를보고 해결하려는 문제를 해결해야하는 경우 별표를 표시하여 지원해주세요. 문제를 이해하지 못하거나 해결할 수없는 경우 언제든지 함께 찾아서 토론 할 수 있습니다.
내 WeChat : huang009516