获取表格的数据
1.html
2.js处理
setList(){
// this.allList=this.list;
this.renderDetailList.forEach((item,index)=>{
item.key = index;
item.name=item.title;
let Allenergy=0,allprotein=0,allfat=0,allcarbohydrates=0,allamountPayable=0;
var tableitem =Object.assign({},item);
item.goodsList.forEach((i,iindex) => {
i.radioIndex=item.key;
i.key = iindex;
// i.name=`营养方案-${index+1}`;
i.name=item.title;
i.serialNum=index;
i.goodsId=i.id;
i.goodsUnit=i.uname;
i.goodsUnitId=i.unitId;
i.price=i.unitPrice;
i.quantity=i.quantityUsed;
//遍历prodAllPrice这个字段，并累加
// toFixed(1)
// Math.round(t*100)/100;
Allenergy+= i.unitEnergy*i.quantityUsed;
allprotein+=i.unitProtein*i.quantityUsed;
allfat+=i.unitFat*i.quantityUsed;
allcarbohydrates+=i.unitCarbohydrate*i.quantityUsed;
allamountPayable+=i.subtotal;
});
Object.assign(tableitem,{energy:Allenergy.toFixed(1)},{protein:allprotein.toFixed(1)},
{fat:allfat.toFixed(1)},{carbohydrates:allcarbohydrates.toFixed(1)},{amountPayable:allamountPayable.toFixed(2)})
this.$set(this.allList,index,tableitem);
})
// console.log("allList");
// console.log(this.allList);
},
3.后台返回的数据格式
4.表格的columns（直接写在data里面）
columns: [
{
title:'序号',
scopedSlots: {customRender:'serialNum' },
width:50,
align:'center',
customRender: (value, row, index,record) => {
const obj = {
children: ,
attrs: {},
};
const rowSpanNum =this.allList[value.radioIndex].goodsList.length;
if (index ===0) {
obj.attrs.rowSpan =rowSpanNum;
}else {
obj.attrs.rowSpan =0;
}
return obj;
}
},
{
title:'名称',
width:100,
align:'center',
scopedSlots: {customRender:'name' },
customRender: (value, row, index,record) => {
const obj = {
children:`${value.name}`,
attrs: {},
};
// console.log(value,"value");
// console.log(row,"row");
// console.log(index,"index");
// console.log(record,"record");
// console.log(value.radioIndex,"sindex",this.allList[value.radioIndex].goodsList.length,"跨行数");
const rowSpanNum=this.allList[value.radioIndex].goodsList.length;
if (index ===0) {
obj.attrs.rowSpan =rowSpanNum;
}else{
obj.attrs.rowSpan =0;
}
return obj;
},
},
{
title:'商品名称',
width:100,
ellipsis:true,
// dataIndex:'goodsName',
scopedSlots: {customRender:'goodsName' },
align:'center',
rowSpan:0,
},
{
title:'品牌',
width:80,
dataIndex:'brandName',
align:'center',
rowSpan:0,
},
{
width:100,
title:'规格',
// dataIndex:'',
scopedSlots: {customRender:'goodsSpecifications' },
ellipsis:true,
align:'center',
rowSpan:0,
},
{
width:50,
title:'单位',
dataIndex:'uname',
align:'center',
rowSpan:0,
},
{
title:'数量',
scopedSlots: {customRender:'quantityUsed' },
width:80,
align:'center',
rowSpan:0,
},
{
title:'单价',
width:80,
scopedSlots: {customRender:'unitPrice' },
// dataIndex:'unitPrice',
align:'center',
rowSpan:0,
},
// {
// title: '小计',
// dataIndex:'subtotal',
// align:'center',
// rowSpan:0,
// },
{
title:'操作',
scopedSlots: {customRender:'operation' },
align:'center',
rowSpan:0,
}
],
5.跨行处理细节
components--》userlist--》intervition--》prescriptionelementsBox.vue文件
