element在前端分页的同时，表格添加、删除、编辑行

表格非编辑状态时仅可删除

编辑表格时可编辑表格数据和添加、删除行

首先要处理当前页数据，每进行一次添加删除操作，都需进行当前页的判断与处理，通过 fliter过滤符合条件的数据

handleCurrentChange (val) {
        console.log(`当前页: ${val}`);
        let self = this;
        this.tableDataFilter = this.tableData.filter(function (item) {
          return self.tableData.indexOf(item) < (val * self.paginationData.currentSize) &&
            self.tableData.indexOf(item) >= (val - 1) * self.paginationData.currentSize;
        });
      }

添加行

addRow (lines) {
        let line = {};
        line = {
          id: null,
          code: null,
          name: null
        };
        lines.push(line);
        this.paginationData.total++;
        this.paginationData.currentPage = parseInt(this.paginationData.total / this.paginationData.currentSize) + 1;
        this.handleCurrentChange(this.paginationData.currentPage);
      }

注：添加数据时需跳转到最后一页，在最后一页的末尾添加

删除行

handleDelete (lines, index) {
        lines.splice((this.paginationData.currentPage - 1) * this.paginationData.currentSize + index, 1);
        this.paginationData.total--;
        if (this.tableDataFilter.length > 1) {
          this.handleCurrentChange(this.paginationData.currentPage);
        } else {
          this.paginationData.currentPage--;
          this.handleCurrentChange(this.paginationData.currentPage);
        }
      }

编辑行

通过v-if与v-else进行表格的编辑

具体代码如下：

<template>
  <div class="tableContent">
    <el-button size="mini" @click="handleEdit()">Edit</el-button>
    <el-button size="mini" @click="onSubmit()">Submit</el-button>
    <el-table :data="tableDataFilter" style="width: 100%">
      <el-table-column type="index" label="序号" width="50">
      </el-table-column>
      <el-table-column prop="code" label="编号">
        <template slot-scope="scope">
          <el-input v-if="editable" v-model.trim="scope.row.code">
          </el-input>
          <span v-else>{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称">
        <template slot-scope="scope">
          <el-input v-if="editable" v-model.trim="scope.row.name">
          </el-input>
          <span v-else>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="12">
              <el-button
                size="mini"
                type="text"
                @click="handleDelete(tableData, scope.$index)">
                Delete
              </el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginationData.currentPage"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="paginationData.currentSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="paginationData.total">
    </el-pagination>
    <div v-if="editable"
         class="el-table-add-row"
         style="width: 99.2%;"
         @click.stop="addRow(tableData)">
      <span>+ 添加</span></div>
  </div>
</template>

export default {
    name: 'myTable',
    data () {
      return {
        paginationData: {
          currentPage: 1, // 当前页码
          currentSize: 10, // 当前每页条目数
          total: 0 // 总数据数
        },
        id: 1,
        tableData: [
        {
          'id': 1,
          'code': '编码1',
          'name': '图片'
        },
        {
          'id': 2,
          'code': '编码2',
          'name': '图片'
        },
        {
          'id': 3,
          'code': '编码3',
          'name': '图片'
        }
        ], // 所有表数据
        tableDataFilter: [], // 显示的表数据
        editable: false // 判断是否编辑
      };
    },
    created () {
      this.handleinit();
    },
    methods: {
      // 处理第一页数据
      handleinit () {
        if (this.tableData.length <= 10) {
          this.tableDataFilter = this.tableData;
        } else {
          let self = this;
          this.tableDataFilter = this.tableData.filter(function (item) {
            return self.tableData.indexOf(item) < self.paginationData.currentSize;
          });
        }
        this.paginationData.total = this.tableData.length;
      },
      // 编辑
      handleEdit () {
        this.editable = true;
      },
      // 删除行
      handleDelete (lines, index) {
        lines.splice((this.paginationData.currentPage - 1) * this.paginationData.currentSize + index, 1);
        this.paginationData.total--;
        if (this.tableDataFilter.length > 1) {
          this.handleCurrentChange(this.paginationData.currentPage);
        } else {
          this.paginationData.currentPage--;
          this.handleCurrentChange(this.paginationData.currentPage);
        }
      },
      // 添加行
      addRow (lines) {
        let line = {};
        line = {
          id: null,
          code: null,
          name: null
        };
        lines.push(line);
        this.paginationData.total++;
        this.paginationData.currentPage = parseInt(this.paginationData.total / this.paginationData.currentSize) + 1;
        this.handleCurrentChange(this.paginationData.currentPage);
      },
      // 每页条目数变化
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`);
        let self = this;
        this.paginationData.currentPage = 1;
        // console.log(this.paginationData.currentPage);
        this.tableDataFilter = this.tableData.filter(function (item) {
          return self.tableData.indexOf(item) < (self.paginationData.currentPage * val) &&
            self.tableData.indexOf(item) >= (self.paginationData.currentPage - 1) * val;
        });
      },
      // 当前页码变化
      handleCurrentChange (val) {
        console.log(`当前页: ${val}`);
        let self = this;
        this.tableDataFilter = this.tableData.filter(function (item) {
          return self.tableData.indexOf(item) < (val * self.paginationData.currentSize) &&
            self.tableData.indexOf(item) >= (val - 1) * self.paginationData.currentSize;
        });
      },
      // 提交
      onSubmit () {
        this.editable = false;
        console.log('提交的数据');
        console.log(this.tableData);
      }
    }
  };

添加按钮的样式：

.el-table-add-row {
    margin-top: 10px;
    width: 100%;
    height: 34px;
    border: 1px dashed #c1c1cd;
    border-radius: 3px;
    cursor: pointer;
    justify-content: center;
    display: flex;
    line-height: 34px;
  }