ant design vue table是输入框形式 然后增加行带有复选框 减去行在vue3中

### 使用 Ant Design Vue 实现功能丰富的表格 在 Vue 3 中利用 Ant Design Vue 创建一个具备输入框单元格、支持添加新行（含复选框）、并能移除现有行的表格组件，可以通过如下方式达成。 #### 安装依赖库 首先需安装 `ant-design-vue` 和其图标包： ```bash npm install ant-design-vue@next @ant-design/icons-vue ``` #### 导入所需模块 接着，在项目入口文件或相应页面导入必要的样式与组件： ```javascript import { Table, Input, Checkbox } from 'ant-design-vue'; app.use(Table); app.use(Input); app.use(Checkbox); // 如果需要全局注册，则继续执行下面两行代码；如果只想局部使用则跳过这两步 import 'ant-design-vue/dist/antd.css'; // 或者 'ant-design-vue/es/style/css' ``` #### 编写模板结构 定义好 HTML 结构部分，这里采用单文件组件 `.vue` 文件格式为例展示基本框架[^1]： ```html <template> <a-table :columns="columns" :data-source="dataSource"> <!-- 自定义列 --> <template #bodyCell="{ column, record, index }"> <template v-if="column.dataIndex === 'name'"> <a-input v-model:value="record.name"/> </template> <template v-else-if="column.key === 'operation'"> <span> <a-popconfirm title="确认删除?" ok-text="是" cancel-text="否" @confirm="handleDelete(index)"> <a href="#">删除</a> </a-popconfirm> </span> </template> <template v-else-if="column.type === 'checkbox'"> <a-checkbox /> </template> </template> <!-- 添加按钮 --> <template #footer> <button type="primary" style="width: 100%;" @click="addNewRow">新增一行</button> </template> </a-table> </template> ``` #### 初始化数据源和方法逻辑 最后设置 JavaScript 部分来管理状态变化及交互行为。这部分主要涉及响应式变量声明、事件处理器编写等内容: ```javascript <script setup lang="ts"> import { ref } from 'vue'; const columns = [ { title: '名称', dataIndex: 'name', key: 'name', }, { title: '', width: 50, customRender: () => ({ type: 'checkbox', scopedSlots: true }), }, { title: '操作', key: 'operation', fixed: 'right', width: 80, } ]; let dataSource = ref([ { name: '', checked: false }, ]); function handleDelete(idx) { const newData = [...dataSource.value]; newData.splice(idx, 1); dataSource.value = newData; } function addNewRow() { const newRow = { name: '', checked: false }; dataSource.value.push(newRow); } </script> ``` 通过上述配置即可构建出满足需求的功能性表格控件。值得注意的是实际开发过程中可能还需要考虑更多细节优化用户体验，比如表单项验证、异步保存等功能扩展。