在项目中遇到这样一个需求：在下图的表格上 点击左边的加号增加一整行的数据，点击右边的加号，增加右边三行的数据
后端提交接口要求的参数样例如下，其中conditionJson是我们要提交到后台的表格数据：
"entity": {
"ruleCode": "address",
"ruleName": "发送地址",
"defaultTableId": 11111111,
"defaultFieldId": 111111,
"conditionJson": "[{\"combination\":\"\",\"fieldId\":11111,\"tableId\":111,\"condition\":[{\"combination\":\"\",\"key\":\"0\",\"type\":\"0\",\"value\":\"1\"},{\"combination\":\"OR\",\"key\":\"2\",\"type\":\"0\",\"value\":\"999\"}]},{\"combination\":\"AND\",\"fieldId\":111,\"tableId\":111,\"condition\":[{\"combination\":\"\",\"key\":\"0\",\"type\":\"0\",\"value\":\"9\"}]}]",
"resultJson": "{\"condition\":{\"type\":\"0\",\"key\":\"0\",\"value\":\"test\"},\"fieldId\":\"1111\",\"tableId\":\"111\"}"
}
通过看element-plus的文档，知道它有一个"span-method"的属性，是用于合并单元格的
于是我们绑定这个方法
<el-table ref="tableRef" :span-method="objectSpanMethod" :data="state.formValue.ruleList" border>
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
if (columnIndex === 1 || columnIndex === 0) {
const _row = spliceData.spliceArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col,
}
}
}
//左边的加号
<el-table-column label="" width="100">
<template #default="scope">
<div class="bottonbox">
<el-dropdown>
<el-icon :size="18" class="CirclePlus">
<CirclePlus color='#3A70F1' />
</el-icon>
<template #dropdown>
<div class="dropdownBoxContent">
<div class="dropdownBoxContent-title">关系选择</div>
<div class='dropdownBoxContent-content'>
<!-- state.formValue.ruleList[scope.$index].combination-->
<el-radio-group v-model="radio1" class="ml-4" @change="addbusinessList($event,scope,'defaultValueList',0)">
<el-radio label="AND" size="large">AND</el-radio>
<el-radio label="OR" size="large">OR</el-radio>
</el-radio-group>
</div>
</div>
</template>
</el-dropdown>
<el-icon @click="deletebusinessList(scope,'defaultValueList')" v-show="state.formValue.ruleList.length>1" :size="18" class="Delete">
<Delete color='red' />
</el-icon>
</div>
</template>
</el-table-column>
//右边的加号
<el-table-column label="" width="100">
<template #default="scope">
<div class="bottonbox">
<el-dropdown>
<el-icon v-show="scope.row.tableId&&scope.row.fieldId" :size="18" class="CirclePlus">
<CirclePlus color='#3A70F1' />
</el-icon>
<template #dropdown>
<div class="dropdownBoxContent">
<div class="dropdownBoxContent-title">关系选择</div>
<div class='dropdownBoxContent-content'>
<!-- -->
<el-radio-group v-model="radio1" class="ml-4" @change="addbusinessList($event,scope,'defaultValueList',1)">
<el-radio label="AND" size="large">AND</el-radio>
<el-radio label="OR" size="large">OR</el-radio>
</el-radio-group>
</div>
</div>
</template>
</el-dropdown>
<el-icon @click="deletebusinessList(scope,'defaultValueList')" v-show="state.formValue.ruleList.length>1" :size="18" class="Delete">
<Delete color='red' />
</el-icon>
</div>
</template>
</el-table-column>
//js
let spliceData = reactive({
// spliceArr: [],
spliceArr: [],
pos: 0
})
//增加列表数据
const addbusinessList = (raido, row, arrNAme, type) => {
//与前面一条数据tableId fieldId 相同 的数据
if (type === 1) {
//条件的 锁定范围后面的加号 增加条件和锁定范围 （后面两列）
//合并单面的单元格
//判断一下fieldId 有没有值
if (row.row.tableId && row.row.fieldId) {
state.formValue.ruleList.splice(row.$index + 1, 0, {
combination: "",
fieldId: state.formValue.ruleList[row.$index].fieldId,
tableId: state.formValue.ruleList[row.$index].tableId,
combinationCh: raido,
key: "",
type: "",
value: "",
defaultFieldList: []
})
} else {
ElMessage.error("请先选择表名字段名！")
}
} else {
//条件的条件名 后面的加号 增加一行数据
state.formValue.ruleList.splice(row.$index + spliceData.spliceArr[row.$index], 0, {
combination: raido,
fieldId: "",
tableId: "",
combinationCh: '',
key: "",
type: "",
value: "",
defaultFieldList: []
}
)
}
nextTick(() => {
spliceData.spliceArr = []
spliceData.pos = 0
getSpanArr(state.formValue.ruleList)
radio1.value = 0
})
}
//处理合并列表数据的方法
const getSpanArr = (data) => {
data.forEach((item, i) => {
if (i === 0) {
spliceData.spliceArr.push(1)
spliceData.pos = 0
} else {
if (item.tableId && item.fieldId) {
//第一次比较的 1,0 2,1 3,2 4,3
if (item.tableId === data[i - 1].tableId && item.fieldId === data[i - 1].fieldId) {
spliceData.spliceArr[spliceData.pos] += 1
spliceData.spliceArr.push(0)
} else {
spliceData.spliceArr.push(1)
spliceData.pos = i == 0 ? 1 : i
}
} else {
//如果tableId和fieldId 没有值
spliceData.spliceArr.push(1)
spliceData.pos = 1
}
}
})
}
//到这一步 做到了表格合并 但是此时的前端数据是一个数组对象 需要做提交还要处理成后端想要的数据提交
//处理保存的数据 conditionJson
const getEntityconditionJson = (arrList) => {
//整理出来的二维数组
let arrzl = [], targetEntityConditionArr = []
spliceData.spliceArr.forEach((item, i) => {
let targetArr = arrList.slice(i, item + i)
if (targetArr && targetArr.length > 0) {
arrzl.push(targetArr)
}
})
arrzl.forEach((item, i) => {
let objcondition = {}
objcondition.combination = item[0].combination
objcondition.fieldId = Number(item[0].fieldId)
objcondition.tableId = Number(item[0].tableId)
objcondition.condition = []
item.forEach((o, j) => {
objcondition.condition.push({
combination: o.combinationCh,
key: o.key,
type: o.type,
value: o.value,
})
})
targetEntityConditionArr.push(objcondition)
})
return targetEntityConditionArr
}
