效果:
父组件
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 = [];
}
}
}