完整的Vue+element-ui table组件实现表格内容的编辑删除和新行添加小实例

先上一张页面展示图，画面很简单（当然这个功能也很简单，不过笔者刚接触Vue，为了避免以后出现相同需求再重写，所以记录一下）

 

 老样子，直接贴代码，不多BB

<template>
  <el-row style="height: 100%;width:100%" type="flex" justify="center">
    <el-col :span="24">
      <el-table
        :data="tableData"
        :stripe="true"
        height="100%"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="date"
          label="客户 ID"
          width="auto"
          align="center"
          :resizable="false">
          <template slot-scope="scope">
            <el-input v-if=" isEdit == scope.$index " v-model="scope.row.date" placeholder="请输入内容" style="text-align: center;"></el-input>
            <span v-if=" isEdit != scope.$index ">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="地域别"
          width="auto"
          align="center"
          :resizable="false">
          <template slot-scope="scope">
            <el-input v-if=" isEdit == scope.$index " v-model="scope.row.name" placeholder="请输入内容" style="text-align: center;"></el-input>
            <span v-if=" isEdit != scope.$index ">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="auto"
          align="center"
          :resizable="false">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                v-if=" isEdit == scope.$index "
                size="mini"
                @click="handleEdit(scope.$index, scope.row, 1)">保存</el-button>
              <el-button
                v-if=" isEdit != scope.$index "
                size="mini"
                @click="handleEdit(scope.$index, scope.row, 0)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
        <el-button
          slot="append"
          style="width: 100%;border-radius: 0;border-top: 0;border-left: 0;border-right: 0;"
          @click="appendNew">点击追加一行</el-button>
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎'
        }, {
          date: '2016-05-04',
          name: '王小虎'
        }, {
          date: '2016-05-01',
          name: '王小虎'
        }, {
          date: '2016-05-03',
          name: '王小虎'
        }],
        isEdit: -99
      }
    },
    methods: {
      handleEdit(index, row, status) {
        switch (status) {
          case 0:
            this.isEdit = index;
            break;
          case 1:
            this.isEdit = -99;
            break;
        }
      },
      handleDelete(index, row) {
        this.$confirm('这将会永久删除该行数据，是否继续?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
          this.tableData.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      appendNew(){
        this.tableData.push({
          date: '',
          name: ''
        });
        this.isEdit = this.tableData.length - 1
      },
      tableRowClassName({row, rowIndex}){
        row.index = rowIndex
      }
    }
  }
</script>

<style>
  html, body {
    height: 100%;
  }
</style>

以上。