多说⽆益，上代码
*HTML
<Table width="100%":columns="lineCol":data="lineData"></Table>
TS
private lineCol =[
{
title:"序号",
// key: "outAgencyName",
type:"index",
tooltip:true,
},
{
title:"酒类型",
key:"productName",
tooltip:true,
width:250,
render:(h:any, params:any)=>{
return h("div",[
h("Table",{
props:{
columns:[
{
title:"酒类型",
key:"productName",
tooltip:true,
width:213,
render:(h:any, params:any)=>{
let text =`${w.productName}${
}`;
return h(
"div",
{
style:{
overflow:"hidden",
whiteSpace:"nowrap",
textOverflow:"ellipsis",
},
attrs:{
title: text,
},
},
text
)
;
},
},
],
"show-header":false,
data: w.tableData,//被嵌套表格的数据
大胆的爱
小心的偷
},
}),
]);
},
},
{
title:"数量",
长江学者新规定
key:"number",
render:(h:any, params:any)=>{
return h("div",[
h("Table",{
h("Table",{
props:{
columns:[{ title:"数量", key:"number", tooltip:true}], "show-header":false,
data: w.tableData,//被嵌套表格的数据},
}),
]
);
},
},
{
title:"状态",
key:"status",
},
{
title:"⽇期",
key:"time",
tooltip:true,
},
{
title:"详情",
key:"id",
render:(h:any, params:any)=>{
return h("div",[
h("Button",{
props:{
type:"text",
size:"small",
customIcon:"iconfont iconcheck",
},
on:{
click:()=>{
this.checkDetails(params);
},
},
}),
]);
},
},
];
样式
由于直接使⽤不甚美观，我们还需要修改样式顺德大部制
//.outlet是页⾯的⾃定义calss标签
// 表格嵌套表格
加多宝战略.outlet .ivu-table-cell .ivu-table-wrapper{
margin-top: 0;
.ivu-table-cell{
padding: 0;
.ivu-table{
td{
height: 30px;
}
.ivu-table-body table{
width: 100% !important;
}
}
}结晶紫
效果图
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议