vue 嵌套表格组件_vue element ts 表格嵌套动态表格

效果：

父组件

export default class ShowQuote extends Vue {

private parentTableDate: Array = [

{

id: "父级1",

a: "父级a",

aa: "父级aa",

aaa: "父级aaa",

name: "父级头部1",

tableData: [

{

id: "子id1",

name: "子名称1",

category: "子级备注1"

},

{

id: "子id11",

name: "子名称11",

category: "子级备注11"

}

]

},

{

id: "父级2",

a: "父级a",

aa: "父级aa",

aaa: "父级aaa",

name: "头部2",

tableData: [

{

id: "子级2",

name: "子级2",

category: "子级备注2"

}

]

}

];

}

父组件绑定值

子组件：

highlight-current-row

border

@select="selectChange"

@select-all="selectChange"

ref="table"

@row-click="expandChange"

:row-key="getRowKeys"

:expand-row-keys="expands"

@expand-change="expandChange">

border>

label="子id"

>

label="子名称"

>

label="子其他">

>

prop="id">

prop="name">

删除

编辑

import { Component, Prop, Vue } from "vue-property-decorator";

@Component

export default class PurchaseTable extends Vue {

@Prop() private parentTableDate!: [];

// 获取row的key值

getRowKeys(row) {

return row.id;

}

private expands: Array = [];

selectChange(selection) {}

// 手风琴收起展开   如果不需要可以删掉下面这段

expandChange(row) {

let temp = this.expands;

this.expands = [];

this.expands.push(row.id);

if (temp.length === 1 && temp[0] === row.id) {

// 收起展开行

this.expands = [];

}

}

}