1.拆分数据（一层合并的简单处理）
<el-table
:data="dataList"
:span-method="objectSpanMethod"
class="num_th-table"
border>
</el-table>
// 拆分单元格数据
handleSplitCell (list) {
if (!list || list.length < 1) return;
let result = [];
list.forEach((item, index) => {
if (item.rightList && item.rightList.length > 0) {
item.rightList.forEach(v => {
item.flagIndex = index
result.push({
...item,
...v,
// detailId: v.id,
id: item.id,
})
})
}
})
return result;
},
getspanArray (data) {
this.spanArray = []
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArray.push(1);
this.pos = 0
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].id === data[i - 1].id) {
this.spanArray[this.pos] += 1;
this.spanArray.push(0);
} else {
this.spanArray.push(1);
this.pos = i;
}
}
console.log(this.spanArray)
}
},
objectSpanMethod ({ rowIndex, columnIndex }) {
if (columnIndex != 2 && columnIndex != 3) {
const _row = this.spanArray[rowIndex];
const _col = _row > 0 ? 1 : 0;
return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
rowspan: _row,
colspan: _col
}
}
},
2.多层数据合并的处理
<el-table
:data="dataList"
:span-method="spanMergeCell"
class="num_th-table"
border>
</el-table>
// 拆分单元格
handleSplitCell1 (list) {
if (!list || list.length < 1) return;
let result = [];
list.forEach((item, index) => {
if (item.rightPackList && item.rightPackList.length > 0) {
item.rightPackList.forEach(itemPlan => {
if (itemPlan.rightList && itemPlan.rightList.length > 0) {
itemPlan.rightList.forEach(itemWork => {
item.flagIndex = index
result.push({
...item,
...itemPlan,
...itemWork,
uniqueFlag: itemWork.uniqueFlag,
companyId: itemPlan.companyId,
})
})
} else {
item.flagIndex = index
result.push({
...item,
...itemPlan,
uniqueFlag: itemPlan.uniqueFlag,
companyId: itemPlan.companyId,
})
}
})
} else {
item.flagIndex = index
result.push({
...item,
companyId: item.companyId,
})
}
})
return result;
},
// 设置合并列 - (总数据、第一层合并列、相同泊位Idf需要合并的列、第二层合并列)
this.spanMergeCell = this.computeObjectSpanMethod(this.dataList, [0], [], [1, 5, 6, 7, 8]);
computedData (data, typeName) {
let rowData = []
let flagIndex = data[0][typeName] + String(data[0].flagIndex) // 标记相同的数据
let startIndex = 0 // 开始合并行号
let rowNum = 0 // 合并行数
for (let i = 0; i < data.length; i++) {
const flagType = data[i][typeName] + String(data[i].flagIndex)
if (flagType === flagIndex) {
rowNum += 1
} else {
flagIndex = flagType
startIndex = i
rowNum = 1
}
rowData.push({
rowIndex: startIndex,
rowspan: rowNum
})
}
return rowData
},
computeObjectSpanMethod (data, columnData, colWorkId = [], reportColWorkId = []) {
if (!data || data.length < 1 || !columnData || columnData.length < 1) return
const rowData = this.computedData(data, 'companyId')
const rowDataTwo = this.computedData(data, 'uniqueFlag')
return function objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
const _dataLength = columnData.length > reportColWorkId.length ? columnData.length : reportColWorkId.length
for (let i = 0; i < _dataLength; i++) {
if (columnIndex === columnData[i]) {
let obj = {
rowspan: 0,
colspan: 0,
}
for (let n = 0; n < rowData.length; n++) {
if (rowIndex === rowData[n].rowIndex) {
obj.rowspan = rowData[n].rowspan;
obj.colspan = 1;
}
}
return obj
} else if (columnIndex === (colWorkId && colWorkId[i])) {
let obj = {
rowspan: 1,
colspan: 1,
}
return obj;
} else if (columnIndex === (reportColWorkId && reportColWorkId[i])) {
let obj = {
rowspan: 0,
colspan: 0,
}
for (let n = 0; n < rowDataTwo.length; n++) {
if (rowIndex === rowDataTwo[n].rowIndex) {
obj.rowspan = rowDataTwo[n].rowspan;
obj.colspan = 1;
}
}
return obj;
}
}
}
},
3.修改el-select选择内容的宽度
image.png
重点在于
el-option的style="width:350px;"
<el-form-item
label="选择企业"
prop="companyName"
label-width="110px"
style="margin-right: 70px;">
<el-select
v-model="forms.companyName"
:remote-method="remoteMethod"
value-key="companyId"
class="num_input"
size="small"
filterable
placeholder="请选择企业"
remote
style="width:350px;"
@change="companySelect">
<el-option
v-for="item in selectcompanyList"
:key="item.companyId"
:label="item.companyName"
:value="item"
style="width:350px;"/>
</el-select>
</el-form-item>
4.子组件为table并且有数组校验表单需求
image.png
image.png
重点代码：
<el-table-column
prop="amount"
label="介质总量"
min-width="100"
align="center">
<template slot-scope="scope">
<el-form-item
:rules="{
validator: checkAmount, trigger: ['blur']
}"
:prop="`rightList[${scope.$index}].amount`">
<el-input
v-model="scope.row.amount"
clearable
size="small"
style="width: 100%; margin:15px 0;"
placeholder="请输入介质总量"
@input="amountChange(scope.row.amount,scope.$index)"/>
</el-form-item>
</template>
</el-table-column>
scripts:
data () {
return {
// 介质总量
checkAmount: (rule, value, callback) => {
var reg = /^[1-9]\d*$/;
if (!value || value === "") {
callback(new Error('介质总量不能为空'));
} else if (reg.test(value)) {
if (Number(value) <= 0) {
callback(new Error('请输入正整数'));
} else {
callback();
}
} else {
callback(new Error('请输入正整数'));
}
},
}
},
在父组件里面的校验代码：
// 校验表单
this.$refs.form.validate((valid) => {
if (!valid) return;
if (!this.serviceList || this.serviceList.length == 0) {
this.$message.error("请选择服务！");
}
});
5.网络请求的字典转化方法
image.png
数据格式如下：
getDictValue (type, value) {
let target = this.dictData.filter(v => v.type == type)[0]?.dictList;
let showvalue = target.filter(v => v.code == value)[0];
return (showvalue && showvalue.name) || '-'
},
网友评论