表单的增删改查（代码）

效果图：

<template>
  <div class="app">
      <!-- 搜索框 -->
      <el-input placeholder="请输入搜索内容" style="margin-bottom:20px;margin-right:30px;width: 30%;">  </el-input>
      <el-button type="danger">搜索</el-button>
    <h1>表格的增删改查</h1>
    <div class="head">
    <el-row :gutter="20">
      <el-col :span="6"><el-input v-model="treeInfo.name" placeholder="请输入你的公司名"></el-input>
      </el-col>
      <el-col :span="6"><el-input v-model="treeInfo.position" placeholder="请输入你的职位"></el-input>
      </el-col>
      <el-col :span="6"><el-input v-model="treeInfo.major" placeholder="请输入专业"></el-input>
      </el-col>
      <el-col :span="6"><el-input v-model="treeInfo.number" placeholder="请输入数量"></el-input>
      </el-col>
    </el-row>
   <el-row>
    <el-button type="primary" plain style="width:100%;margin-top:30px" @click="userForm">添加信息</el-button>
   </el-row>
   </div>
   <div>
    <!-- <template slot="search"> -->
      <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column label="序号" width="180"><template slot-scope="scope">{{scope.$index + 1}}</template></el-table-column>
      <el-table-column prop="name" label="公司名" width="180"></el-table-column>
      <el-table-column prop="position" label="职位"></el-table-column>
      <el-table-column prop="major" label="专业"></el-table-column>
      <el-table-column prop="number" label="数量"></el-table-column>
      <el-table-column prop="operation" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="editForm(scope.row,scope.$index)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="deleteForm(scope.$index)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- </template> -->
   </div>
   <!-- 编辑弹窗 -->
   <el-dialog title="编辑用户信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
    <div>
      <el-form ref="ruleForm" :model="ruleForm" label-width="100px">
        <el-form-item label="公司名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-input v-model="ruleForm.position"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input v-model="ruleForm.major"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="number">
          <el-input v-model="ruleForm.number"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="determine('ruleForm')">确 定</el-button>
    </span>
   </el-dialog>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
export default {
  name: 'addFile',
  props: {
    msg: String
  },
  data () {
    return {
      treeInfo: {
        name: '', // 公司名
        position: '', // 职位
        major: '', // 专业
        number: '' // 数量
      },
      tableData: [
        {
          name: '公司老大',
          position: '老板',
          major: '金融',
          number: '1'
        }, {
          name: '公司会计',
          position: '算账会计',
          major: '会计',
          number: '5'
        }, {
          name: '公司贸易',
          position: '贸易',
          major: '对外贸易',
          number: '12'
        }, {
          name: '公司前端',
          position: '前端',
          major: '前端开发',
          number: '12'
        }
      ],
      ruleForm: {
        name: '',
        position: '',
        major: '',
        number: ''
      },
      dialogVisible: false, // 弹窗
      userIndex: 0,
      search: '',
      index: ''
    }
  },
  methods: {
    // 表单录入数据
    userForm () {
      if (!this.treeInfo.name) {
        this.$message({
          message: '请输入公司名'
        })
        return
      }
      if (!this.treeInfo.position) {
        this.$message({
          message: '请输入你的职位',
          type: 'warning'
        })
        return
      }
      if (!this.treeInfo.major) {
        this.$message({
          message: '请输入专业',
          type: 'warning'
        })
        return
      }
      if (!this.treeInfo.number) {
        this.$message({
          message: '请输入数量',
          type: 'warning'
        })
        return
      }
      this.tableData.push(this.treeInfo)
      this.treeInfo = {
        name: '',
        position: '',
        major: '',
        number: ''
      }
    },
    // 编辑表单
    editForm (item, index) {
      this.userIndex = index
      this.ruleForm = {
        name: item.name,
        position: item.position,
        major: item.major,
        number: item.number
      }
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    },
    // 表单确定按钮
    deleteForm (index) {
      this.$confirm('确认删除此用户?', '提示', {
        // confirmButtonText: '确定',
        // cancelButtonText: '取消',
        type: 'warning'
        // center: true
      }).then(() => {
        this.tableData.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑确定按钮——更新数据
    determine (formName) {
      let _this = this
      _this.dialogVisible = false
      接下来，调用接口，处理回显数据
    },
  查的话更简单，
  就是用slot=search 写在<template/>里面
  然后用v-model=search.name(这里写你要搜索的参数)
  }
}
</script>

<style lang="scss" scoped>

</style>

以上代码增删功能已实现。。

样式木有调整。

把代码直接复制到.vue文件里直接运行即可。