// 此示例是在组件内部定义了一个子组件。你当然也可以通过 `import`关键字导入一个组件
const ChildTableComp = {
name: "ChildTableComp",
template: `
<div class="child-table-comp">
<ve-table
style="width:100%"
:columns="columns"
:table-data="row.Children"
/>
</div>
`,
props: {
row: Object,
},
data() {
return {
columns: [
{ field: "SourceName", key: "SourceName", title: "点位名称" },
{ field: "SStationId", key: "SStationId", title: "村庄编码" },
],
};
},
};
export default {
data() {
return {
list: [], // table数据
options: {
// table样式参数
stripe: true, // 是否为斑马纹 table
loading: true, // 是否添加表格loading加载动画
highlightCurrentRow: true, // 是否支持当前行高亮显示
mutiSelect: true, // 是否支持列表项选中功能
}, // table 的参数结束
columns: [
{field: "",key: "a", type: "expand",title: "",width: 50,align: "center",},
{ field: 'Id', title: 'Id',key:'Id', align: 'center'},
{ field: 'City', title: '城市', key:'City',align: 'center'},
{ field: 'RegionName', title: '区县', key:'RegionName',align: 'center',},
{ field: 'TownName', title: '乡镇', key:'TownName',align: 'center' },
{ field: 'Village', title: '村庄名称',key:'Village', align: 'center' },
{ field: 'SStationId', title: '村庄编码',key:'SStationId', align: 'center'},
{ field: 'GLongitude', title: '经度(E)',key:'GLongitude', align: 'center' },
{ field: 'GLatitude', title: '纬度(N)', key:'GLatitude',align: 'center' },
{ field: 'Population', title: '人口',key:'Population', align: 'center' },
], // 需要展示的列
expandOption: {
render: ({ row, column, rowIndex }, h) => {
return <ChildTableComp row={row} />;
},
},
}
}
}
vue-easytable展开行
最新推荐文章于 2024-09-18 16:44:40 发布