ant design vue前端table组件连接后台接口数据,点击表格内的选择框获取当前行数据的id,点击button按钮并跳转到弹窗页面生成选中数据列,写个简单代码
时间: 2024-05-26 11:09:56 浏览: 132
代码示例:
<template>
<div>
<a-table :columns="columns" :data-source="data">
<template #selection="selections">
<a-checkbox :checked="selections.selectedRowKeys.indexOf(selections.record.key) !== -1" @change="selections.onChange(selections.record.key)"/>
</template>
</a-table>
<a-button @click="showModal">生成选中数据列</a-button>
<a-modal v-model="visible" title="选中数据列">
<p>{{selectedRows}}</p>
</a-modal>
</div>
</template>
<script>
export default {
data() {
return {
columns: [
{ title: '姓名', dataIndex: 'name', key: 'name' },
{ title: '年龄', dataIndex: 'age', key: 'age' },
{ title: '地址', dataIndex: 'address', key: 'address' },
],
data: [
{ key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
{ key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
{ key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
{ key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park' },
],
visible: false,
selectedRowKeys: []
}
},
computed: {
selectedRows() {
return this.data.filter(row => this.selectedRowKeys.includes(row.key))
}
},
methods: {
showModal() {
this.visible = true
}
}
}
</script>
以上代码只是一个简单的示例,实际情况中还需要根据实际需要进行更多的操作和处理,建议参考官方文档进行开发。
阅读全文