vue 表单活动表格

### 如何在 Vue.js 中创建带有活动表格的表单 #### 创建项目结构 为了实现带有活动表格的表单，在 Vue.js 项目中可以采用多种库来简化开发过程。Ant Design Vue 和 Element Plus 是两个流行的选择，它们提供了丰富的组件用于快速构建用户界面。 #### 准备工作环境 确保已经安装了 Node.js 和 npm 或 yarn。接着初始化一个新的 Vue CLI 项目，并安装所需的依赖项： ```bash vue create my-project cd my-project npm install ant-design-vue element-plus --save ``` #### 配置全局样式和插件 对于 Ant Design Vue 可以这样配置： ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; const app = createApp(App); app.use(Antd).mount('#app'); ``` 而对于 Element Plus 则如下设置： ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; createApp(App).use(ElementPlus).mount('#app') ``` #### 构建带活动表格的表单页面 下面是一个简单的例子，展示了如何利用 `a-table` (来自 Ant Design Vue) 或者 `el-table` (来自 Element Plus)，以及相应的表单项如 `a-input`, `el-input` 等来制作一个可编辑的表格[^1]。 ##### 使用 Ant Design Vue 的实例 ```html <template> <div id="app"> <!-- 表格 --> <a-table :columns="columns" :data-source="dataSource" bordered @change="handleChange"> <template #bodyCell="{ column, record, index }"> <span v-if="editingKey === index && column.dataIndex !== 'operation'"> <component :is="'a-' + getInputType(column)" v-model:value="record[column.dataIndex]" /> </span> <template v-else>{{ record[column.dataIndex] }}</template> <span v-if="column.title === 'Operation'" slot-scope="text, record"> <a-button type="link" size="small" @click="edit(record.key)">Edit</a-button> <a-popconfirm title="Sure to delete?" ok-text="Yes" cancel-text="No" @confirm="deleteRow(index)"> <a href="#">Delete</a> </a-popconfirm> </span> </template> </a-table> <!-- 添加新行按钮 --> <a-button style="margin-top: 10px;" type="primary" block @click="addNew">Add New Row</a-button> </div> </template> <script setup lang="ts"> import { ref } from 'vue' let editingKey = ref(-1) function handleChange() { } function edit(key) { editingKey.value = key; } function addNew(){ const newRow = {}; columns.forEach(col => newRow[col.dataIndex] = ''); dataSource.push(newRow); editingKey.value = dataSource.length - 1; } function deleteRow(index){ dataSource.splice(index, 1); } const columns = [ { title: 'Name', dataIndex: 'name', editable: true, }, { title: 'Age', dataIndex: 'age', editable: true, }, { title: 'Address', dataIndex: 'address', editable: true, }, { title: 'Action', dataIndex: '', key: 'action', slots: { customRender: 'operation' } }]; const dataSource = []; for(let i=0;i<5;i++){ dataSource.push({ name:`Edward King ${i}`, age:'32', address:'London Park no. ${Math.floor(Math.random()*10)}', key:i.toString() }); } function getInputType({ dataIndex }) { switch(dataIndex.toLowerCase()){ case 'name': return 'input'; // 文本框 case 'age': return 'input-number'; // 数字输入框 default: return 'textarea'; // 多行文本域 } } </script> ``` ##### 使用 Element Plus 的实例 ```html <template> <div class="form-container"> <el-table :data="tableData" border stripe style="width: 100%"> <el-table-column prop="date" label="Date"></el-table-column> <el-table-column prop="name" label="Name" width="180"> <template #default="scope"> <el-input v-if="scope.row.editing" v-model="scope.row.name"/> <span v-else>{{ scope.row.name }}</span> </template> </el-table-column> <el-table-column prop="address" label="Address"> <template #default="scope"> <el-input v-if="scope.row.editing" v-model="scope.row.address"/> <span v-else>{{ scope.row.address }}</span> </template> </el-table-column> <el-table-column fixed="right" label="Operations" width="120"> <template #default="scope"> <el-button link type="primary" size="small" @click.prevent="toggleEditMode(scope.$index)" >{{ !scope.row.editing ? 'Edit' : 'Save'}} </el-button> <el-button link type="danger" size="small" @click.prevent="removeItem(scope.$index)">Remove</el-button> </template> </el-table-column> </el-table> <el-button type="success" plain @click="addItem()">Add Item</el-button> </div> </template> <script setup lang="ts"> import { reactive } from 'vue' interface TableDataRow { date?: string; name?: string; address?: string; editing?: boolean; } const tableData = reactive<Array<TableDataRow>>([ { date: new Date().toLocaleDateString(), name: 'Tom', address: 'No.189, Grove St, Los Angeles'}, ]); function addItem(): void{ tableData.push({ date:new Date().toLocaleDateString()}); } function removeItem(idx:number):void{ tableData.splice(idx, 1); } function toggleEditMode(idx:number):void{ let row = tableData[idx]; if(row.editing===undefined || !row.editing){ Object.assign(tableData[idx],{...row,...{'editing':true}}); } else { Object.assign(tableData[idx],{...row,...{'editing':false}}); } } </script> ``` 上述代码片段分别演示了基于 Ant Design Vue 和 Element Plus 实现的一个简单但完整的带有活动表格的表单应用案例。这些示例不仅包含了基本的功能——比如添加、删除记录条目，还实现了单元格级别的内联编辑功能[^4]。