Vue+ElementUI 完整增删查改验证功能的表格

<template>
  <div class="block">
    <el-col>
      <el-row>
        <el-form>
          <el-form-item>
            <el-input style="width: 250px;float: left" placeholder="请输入名称" v-model="query"></el-input>
            <el-button @click="handleSelect"  style="float: left;margin-left: 10px">查询</el-button>
            <el-button @click="handleAdd" style="float: left;margin-left: 10px">新增</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
    <el-table
      :data="tableData"
      style="width: 100%"
      border>
      <el-table-column
        prop="date"
        label="日期"
        width="250">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="250">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="350">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
        <el-button  size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
        <el-button  size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      </el-row>
      <el-row>
        <el-dialog class="dialog" :title="operation===true ?'新增':'编辑'" :visible.sync="dialogVisible" width="350px" >
          <el-form  label-width="80px" :model="lineData" :rules="addRule" ref="lineData" >
            <el-form-item label="日期" prop="date">
              <el-input  v-model="lineData.date"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input  v-model="lineData.name"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input  v-model="lineData.address"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleSave" type="primary">确定</el-button>
              <el-button @click="handleCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-row>
    </el-col>
  </div>
</template>

<script>export default {
  data () {
    return {
      operation: true,
      dialogVisible: false,
      lineData: {},
      editData: {},
      query: '',
      addRule: {
        date: [{required: true, message: '请输入日期', trigger: 'blur'}],
        name: [{required: true, message: '请输入名称', trigger: 'blur'}]
      },
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王一虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王二虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王一虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王四虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    handleEdit (index, row) {
      this.editData = JSON.stringify(row)
      this.lineData = JSON.parse(this.editData)
      this.dialogVisible = true
      this.operation = false
    },
    handleDelete (index, row) {
      this.tableData.splice(index, 1)
    },
    handleAdd () {
      this.dialogVisible = true
      this.operation = true
      this.lineData = {}
      this.lineData.id = Math.random()
    },
    handleSelect () {
      if (this.query !== '') {
        const tmpData = []
        for (let item of this.tableData) {
          if (item.name === this.query) {
            tmpData.push(item)
          }
        }
        this.tableData = tmpData
      }
    },
    handleSave () {
      this.$refs.lineData.validate((valid) => {
        if (valid) {
          this.addLine(this.lineData)
          this.dialogVisible = false
        } else {
          alert('保存失败')
          return false
        }
      })
    },
    handleCancel () {
      this.dialogVisible = false
    },
    addLine (item) {
      let existed = false
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id === item.id) {
          this.tableData[i].id = item.id
          this.tableData[i].name = item.name
          this.tableData[i].address = item.address
          this.tableData[i].date = item.date
          existed = true
          break
        }
      }
      if (!existed) {
        this.tableData.push(this.lineData)
      }
    }
  }
}
</script>

<style scoped>
 .block{
   width: 75%;
   margin-left: 400px;
   margin-top: 200px;
 }
</style>