首先，你需要在 Vue3 项目中安装 Ant Design Vue 组件库，在你的组件中引入 `a-table` 组件，具体的代码如下：
```vue
<template>
<div>
<a-table :columns="columns" :data-source="dataSource">
<template #action="{ record }">
<a-button @click="delet
eRow(record.key)" type="dang
er">删除</a-button>
</template>
</a-table>
<a-button @click="addRow" type="primary" style="margin-top: 16px">
添加行</a-button>
</div>
</template>
<script>
import { ref } from 'vue';
import { Button, Table } from 'ant-design-vue';
export default {
components: {
'a-button': Button,
'a-table': Table,
},
setup() {
const dataSource = ref([
{
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',
},
]);
const columns = ref([
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '地址',
dataIndex: 'address',
key: 'address',
},
{
title: '操作',
key: 'action',
slots: { custom
Render: 'action' },
},
]);
const addRow = () => {
dataSource.value.push({
key: dataSource.value.length + 1,
name: '',
age: '',
address: '',
});
};
const delet
eRow = (key) => {
dataSource.value = dataSource.value.filt
er((item) => item.key !== key);
};
return {
dataSource,
columns,
addRow,
delet
eRow,
};
},
};
</script>
```
在这段代码中，我们使用了 `ref`
函数来创建响应式数据 `dataSource` 和 `columns`，并且使用了 `a-table` 组件来展示表格数据。我们还
添加了一个按钮 `
添加行`，并且在 `setup`
函数中定义了 `addRow` 和 `delet
eRow`
函数来处理增删操作。
在 `addRow`
函数中，我们使用 `push` 方法向 `dataSource` 中
添加一条新的数据，其中 `key`
属性为当前数据
长度加 1，其他
属性为空字符串。
在 `delet
eRow`
函数中，我们使用 `filt
er` 方法来过滤掉 `key`
属性等于传入参数 `key` 的数据项。
同时，我们还使用了 `slots` 来自定义 `action` 列的渲染方式，使得每一行的最后一列都显示一个删除按钮。
2920
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
