html单元格嵌套表格,如何在表格中嵌套表格(iview)

如何在表格中嵌套表格(iview)

如何在表格中嵌套表格(iview)

多说无益,上代码

*HTML

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 = `${params.row.productName}${

params.row.modelNumber

}`;

return h(

"div",

{

style: {

overflow: "hidden",

whiteSpace: "nowrap",

textOverflow: "ellipsis",

},

attrs: {

title: text,

},

},

text

);

},

},

],

"show-header": false,

data: params.row.details,

},

}),

]);

},

},

{

title: "数量",

key: "number",

render: (h: any, params: any) => {

return h("div", [

h("Table", {

props: {

columns: [{ title: "数量", key: "number", tooltip: true }],

"show-header": false,

data: params.row.details,

},

}),

]);

},

},

{

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;

}

}

}

效果图

如何在表格中嵌套表格(iview)相关教程