element ui表格实现增加删除修改，要求有对话框和用户交互，能够利用表格中的数据做简单的计算，前台用vue，后台用node，代码实现一下

好的，下面是一个简单的实现增加、删除、修改功能的 Element UI 表格，并且带有对话框和用户交互，可以利用表格中的数据做简单的计算。前台使用 Vue，后台使用 Node.js。

先看一下效果图：


首先我们需要安装 Element UI、Vue 和 Axios：

npm install element-ui
npm install vue
npm install axios

然后在前台代码中引入 Element UI：

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

Vue.use(ElementUI)

接着可以写一个简单的表格组件：

<template>
  <div>
    <el-table :data="tableData" style="width:100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="score" label="分数"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="edit(scope.$index)">编辑</el-button>
          <el-button @click="remove(scope.$index)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible">
      <el-form :model="form" label-position="left" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分数">
          <el-input v-model="form.score"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MyTable',
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, gender: '男', score: 80 },
        { name: '李四', age: 20, gender: '女', score: 90 },
        { name: '王五', age: 22, gender: '男', score: 85 },
        { name: '赵六', age: 21, gender: '女', score: 95 }
      ],
      dialogVisible: false,
      form: {
        name: '',
        age: '',
        gender: '',
        score: ''
      }
    }
  },
  methods: {
    add() {
      this.dialogVisible = true
    },
    edit(index) {
      this.form = Object.assign({}, this.tableData[index])
      this.dialogVisible = true
    },
    save() {
      if (this.form.name && this.form.age && this.form.gender && this.form.score) {
        if (this.form.score >= 0 && this.form.score <= 100) {
          if (this.form.index !== undefined) {
            this.tableData.splice(this.form.index, 1, this.form)
          } else {
            this.tableData.push(this.form)
          }
          this.dialogVisible = false
          this.form = {
            name: '',
            age: '',
            gender: '',
            score: ''
          }
        } else {
          this.$message({
            message: '请填写正确的分数',
            type: 'warning'
          })
        }
      } else {
        this.$message({
          message: '请填写完整的信息',
          type: 'warning'
        })
      }
    },
    remove(index) {
      this.$confirm('确定删除该条记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {})
    }
  }
}
</script>

这里定义了一个 `tableData` 数组，存放表格数据。然后在表格中使用 `el-table` 和 `el-table-column` 组件来渲染表格，同时在最后一列添加了操作按钮，点击按钮会调用对应的方法。

在组件中还定义了一个 `dialogVisible` 变量，控制对话框的显示和隐藏，同时定义了一个 `form` 变量，存放对话框中的表单数据。在点击编辑按钮时，会将对应行的数据赋值给 `form` 变量，并且显示对话框。

在对话框中使用 `el-dialog` 和 `el-form` 组件渲染表单，同时在底部添加了确定和取消按钮，点击确定按钮会调用 `save` 方法保存表单数据。

在 `save` 方法中，首先进行表单数据的校验，如果所有字段都填写了，并且分数在 0 到 100 的范围内，就将数据保存到 `tableData` 数组中，并且隐藏对话框并清空表单数据。否则会弹出错误提示。

在删除数据时，会弹出确认对话框，确认后会从 `tableData` 数组中删除对应的数据。

最后，我们需要在后台代码中实现增删改查的接口。这里使用 Express.js 框架来实现：

const express = require('express')
const bodyParser = require('body-parser')

const app = express()

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

let tableData = [
  { name: '张三', age: 18, gender: '男', score: 80 },
  { name: '李四', age: 20, gender: '女', score: 90 },
  { name: '王五', age: 22, gender: '男', score: 85 },
  { name: '赵六', age: 21, gender: '女', score: 95 }
]

app.get('/api/tableData', (req, res) => {
  res.json(tableData)
})

app.post('/api/tableData', (req, res) => {
  const data = req.body
  const index = tableData.findIndex(item => item.name === data.name)
  if (index !== -1) {
    tableData.splice(index, 1, data)
  } else {
    tableData.push(data)
  }
  res.json({ code: 0, message: 'success' })
})

app.delete('/api/tableData', (req, res) => {
  const name = req.query.name
  const index = tableData.findIndex(item => item.name === name)
  if (index !== -1) {
    tableData.splice(index, 1)
  }
  res.json({ code: 0, message: 'success' })
})

app.listen(3000, () => {
  console.log('Server started on port 3000')
})

这里定义了三个接口：`/api/tableData`（获取数据）、`/api/tableData`（新增或修改数据）和 `/api/tableData`（删除数据）。其中新增和修改数据的接口使用的是同一个路由，根据数据中是否存在对应的记录来判断是新增还是修改。

最后在前台代码中使用 Axios 发送请求：

import axios from 'axios'

export default {
  name: 'MyTable',
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      form: {
        name: '',
        age: '',
        gender: '',
        score: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      axios.get('/api/tableData').then(res => {
        this.tableData = res.data
      })
    },
    add() {
      this.dialogVisible = true
    },
    edit(index) {
      this.form = Object.assign({}, this.tableData[index])
      this.form.index = index
      this.dialogVisible = true
    },
    save() {
      if (this.form.name && this.form.age && this.form.gender && this.form.score) {
        if (this.form.score >= 0 && this.form.score <= 100) {
          axios.post('/api/tableData', this.form).then(res => {
            this.fetchData()
            this.dialogVisible = false
            this.form = {
              name: '',
              age: '',
              gender: '',
              score: ''
            }
          })
        } else {
          this.$message({
            message: '请填写正确的分数',
            type: 'warning'
          })
        }
      } else {
        this.$message({
          message: '请填写完整的信息',
          type: 'warning'
        })
      }
    },
    remove(index) {
      this.$confirm('确定删除该条记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const name = this.tableData[index].name
        axios.delete('/api/tableData', { params: { name } }).then(res => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {})
    }
  }
}

这里在 `created` 钩子函数中调用 `fetchData` 方法获取数据。在保存数据时，使用 Axios 发送 POST 请求，保存成功后再调用 `fetchData` 方法重新获取数据。在删除数据时，使用 Axios 发送 DELETE 请求，删除成功后再调用 `fetchData` 方法重新获取数据。

最后，在 Vue 实例中引入这个表格组件即可：

<template>
  <div>
    <my-table></my-table>
  </div>
</template>

<script>
import MyTable from './MyTable.vue'

export default {
  name: 'App',
  components: {
    MyTable
  }
}
</script>

这样就完成了一个简单的增删改表格的实现。