上述代码有没有效果展示
时间: 2023-07-09 12:46:49 浏览: 54
抱歉,上述代码没有提供完整的效果展示,以下是一个简单的使用 vxe-table 实现主子表数据列表展示的示例:
```html
<template>
<div>
<vxe-table :options="getTableOpts()" @row-click-sub-table="getSubTableOpts"></vxe-table>
</div>
</template>
<script>
import 'vxe-table/lib/index.css';
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css';
Vue.use(VXETable);
export default {
data () {
return {
// 主表数据
tableData: [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 25 },
{ id: 3, name: '王五', age: 30 }
],
// 子表数据
subTableData: [
{ id: 1, parentId: 1, subName: '张三的子表数据1' },
{ id: 2, parentId: 1, subName: '张三的子表数据2' },
{ id: 3, parentId: 2, subName: '李四的子表数据1' },
{ id: 4, parentId: 3, subName: '王五的子表数据1' },
{ id: 5, parentId: 3, subName: '王五的子表数据2' }
]
}
},
methods: {
// 主表列定义
getTableColumn () {
return [
{ type: 'seq', width: 60, align: 'center' },
{ field: 'id', title: '编号', width: 100 },
{ field: 'name', title: '姓名', width: 100 },
{ field: 'age', title: '年龄', width: 100 }
]
},
// 子表列定义
getSubTableColumn () {
return [
{ type: 'seq', width: 60, align: 'center' },
{ field: 'id', title: '编号', width: 100 },
{ field: 'parentId', title: '父编号', width: 100 },
{ field: 'subName', title: '子表数据', width: 200 }
]
},
// 主表参数
getTableOpts () {
return {
data: this.tableData,
columns: this.getTableColumn(),
rowKey: 'id',
height: 400
}
},
// 子表参数
getSubTableOpts (params) {
return {
data: this.subTableData.filter(item => item.parentId === params.row.id),
columns: this.getSubTableColumn(),
rowKey: 'id',
height: 200
}
}
}
}
</script>
```
在这个示例中,使用 vxe-table 的主子表组件展示了主表和子表的数据。当用户点击主表的某一行时,会触发 @row-click-sub-table 事件,然后根据当前行的 id,过滤出对应的子表数据,再使用 vxe-table 的子表组件展示出来。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)