Vue 和 Element UI 实现表格选中行弹出对话框添加信息并插入数据库

在 Vue 和 Element UI 中，实现选中表格中的一行，点击按钮弹出对话框，获取选中行的信息并添加新的信息，并将其插入数据库，可以按照以下步骤进行：

首先，需要安装 Vue 和 Element UI，可以使用以下命令进行安装：

npm install vue
npm install element-ui

在 Vue 的入口文件中，引入 Vue 和 Element UI，并注册相应的组件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

在 Vue 组件中，定义一个表格和一个按钮，并绑定相应的事件：

<template>
  <div>
    <el-table
      :data='tableData'
      style='width: 100%'>
      <el-table-column
        prop='name'
        label='Name'>
      </el-table-column>
      <el-table-column
        prop='age'
        label='Age'>
      </el-table-column>
    </el-table>
    <el-button @click='showDialog'>Add New</el-button>
    <el-dialog :visible.sync='dialogVisible'>
      <el-form :model='newData'>
        <el-form-item label='Name'>
          <el-input v-model='newData.name'></el-input>
        </el-form-item>
        <el-form-item label='Age'>
          <el-input v-model='newData.age'></el-input>
        </el-form-item>
      </el-form>
      <div slot='footer' class='dialog-footer'>
        <el-button @click='dialogVisible = false'>Cancel</el-button>
        <el-button type='primary' @click='saveData'>Save</el-button>
      </div>
    </el-dialog>
  </div>
</template>

在 Vue 组件的data中，定义表格数据、对话框的可见性以及新数据的对象：

data() {
  return {
    tableData: [
      { name: 'John', age: 20 },
      { name: 'Alice', age: 25 },
      { name: 'Bob', age: 30 }
    ],
    dialogVisible: false,
    newData: {
      name: '',
      age: ''
    }
  }
},

在 Vue 组件的methods中，定义弹出对话框和保存数据的方法：

methods: {
  showDialog() {
    this.dialogVisible = true
  },
  saveData() {
    // 获取选中行的信息
    const selectedRow = this.$refs.table.$refs.table.selection[0]
    
    // 添加新的信息
    const newData = {
      name: this.newData.name,
      age: this.newData.age
    }
    
    // 将数据插入数据库
    // TODO: 发送请求将数据插入数据库
    
    // 关闭对话框
    this.dialogVisible = false
  }
}

在showDialog方法中，设置dialogVisible为true，以弹出对话框。在saveData方法中，首先获取选中行的信息，然后将新数据添加到数据库中（这里只是模拟，实际上需要发送请求到后台），最后关闭对话框。

以上就是使用 Vue 和 Element UI 实现选中表格中的一行，点击按钮弹出对话框，获取选中行的信息并添加新的信息，并将其插入数据库的步骤。根据具体需求，还可以根据需要进行其他的修改和优化。