前端开发进阶——Vue2.0 + Element UI 的动态表单实现

2024-01-19 12:05:07

好的，这里有一篇关于“vue2.0+Element UI 实现动态表单（点击按钮增删表格及嵌套输入框的增删）”的文章：

前言

在现代前端开发中，动态表单已经成为不可或缺的组成部分。它们允许用户动态添加或删除表单元素，如表格行、输入框等，从而实现更加灵活和交互友好的用户体验。在这篇文章中，我们将使用 Vue.js 和 Element UI 框架来实现一个动态表单，该表单允许您轻松地添加和删除表格行和嵌套输入框。我们将深入了解该过程，并提供代码示例和逐步说明，帮助您掌握这一重要前端开发技能。

创建 Vue.js 项目

首先，我们需要创建一个 Vue.js 项目。您可以使用 Vue CLI 工具轻松实现这一步。只需在终端中运行以下命令：

vue create my-project

安装 Element UI

接下来，我们需要安装 Element UI 框架。Element UI 是一个基于 Vue.js 的 UI 组件库，提供了丰富的组件，使您可以轻松构建美观实用的用户界面。您可以使用以下命令安装 Element UI：

npm install element-ui

创建 Vue 组件

现在，我们需要创建一个 Vue 组件来构建我们的动态表单。在 my-project/src 目录下创建一个名为 DynamicForm.vue 的文件，并添加以下代码：

<template>
  <div>
    <el-button @click="addTableItem">添加表格行</el-button>
    <el-button @click="removeTableItem">删除表格行</el-button>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="age" label="年龄" width="180"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="300"></el-table-column>
      <el-table-column prop="phone" label="电话" width="180"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ElButton, ElTable, ElTableColumn } from 'element-ui'

export default {
  components: {
    ElButton,
    ElTable,
    ElTableColumn
  },
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20,
          email: 'zhangsan@example.com',
          phone: '1234567890'
        },
        {
          name: '李四',
          age: 30,
          email: 'lisi@example.com',
          phone: '9876543210'
        }
      ]
    }
  },
  methods: {
    addTableItem() {
      this.tableData.push({
        name: '',
        age: null,
        email: '',
        phone: ''
      })
    },
    removeTableItem(index) {
      this.tableData.splice(index, 1)
    }
  }
}
</script>

注册 Vue 组件

接下来，我们需要在 main.js 文件中注册我们的 Vue 组件。在 my-project/src/main.js 文件中添加以下代码：

import Vue from 'vue'
import App from './App.vue'
import DynamicForm from './components/DynamicForm.vue'

Vue.component('dynamic-form', DynamicForm)

new Vue({
  render: h => h(App)
}).$mount('#app')