el-table 纯前端简易分页增删改查

<template>
  <div>
    <!-- 查询框 -->
    <el-input v-model="keyword" placeholder="请输入关键字"></el-input>
    <el-button @click="search">搜索</el-button>

    <!-- 添加按钮 -->
    <el-button @click="showAddDialog">添加</el-button>

    <!-- 表格 -->
    <el-table :data="pagedTableData" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="showEditDialog(scope.row)">编辑</el-button>
          <el-button @click="deleteRow(scope.$index)">删除</el-button>
          <el-button @click="reverseSearch(scope.row)">反查</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 对话框 -->
    <el-dialog title="编辑" :visible.sync="dialogVisible">
      <el-input v-model="editForm.name" placeholder="名称"></el-input>
      <el-button @click="saveEdit">保存</el-button>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
import {
  Button,
  Dialog,
  Input,
  Message,
  MessageBox,
  Option,
  Pagination,
  Select,
  Table,
  TableColumn
} from 'element-ui';
export default {
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Button.name]: Button,
    [Pagination.name]: Pagination,
    [Input.name]: Input,
    [Select.name]: Select,
    [Option.name]: Option,
    [Dialog.name]: Dialog,
    [Message.name]: Message,
    [MessageBox.name]: MessageBox,
  },
  data() {
    return {
      tableData: [],
      pagedTableData: [],
      tempData: [],
      keyword: '',
      dialogVisible: false,
      editIndex: -1,
      editForm: {
        id: null,
        name: ''
      },
      currentPage: 1,
      pageSize: 5
    }
  },
  computed: {
    startIndex() {
      return (this.currentPage - 1) * this.pageSize;
    },
    endIndex() {
      return this.currentPage * this.pageSize;
    }
  },
  mounted() {
    this.getList()
    this.updatePagedTableData();
  },
  watch: {
    tableData: {
      handler() {
        this.updatePagedTableData();
      },
      deep: true
    },
    pageSize() {
      this.updatePagedTableData();
    },
    currentPage() {
      this.updatePagedTableData();
    }
  },
  methods: {
    getList() {
      this.tableData = [
        { id: 1, name: '项目A' },
        { id: 2, name: '项目B' },
        { id: 3, name: '项目C' },
        { id: 4, name: '项目D' },
        { id: 5, name: '项目E' },
        { id: 6, name: '项目F' },
        { id: 7, name: '项目G' },
        { id: 8, name: '项目H' }
      ];
      this.tempData = this.tableData
    },
    updatePagedTableData() {
      this.pagedTableData = this.tableData.slice(this.startIndex, this.endIndex);
    },
    search() {
      // 实现搜索功能逻辑
      if (this.keyword == '') {
        this.tableData = this.tempData
      } else {
        const searchArr = []
        for (let item of this.tempData) {
          if (
            item.name.includes(this.keyword)
            // || item.author.includes(this.select)
          ) {
            // 如果tempData中的某一条目中的某个属性包含输入框中的内容时，
            // 就将这个条目放入tableData中，因为tableData中保存的是用来向表格中展示的数据
            searchArr.push(item);
          }
        }
        this.tableData = searchArr
      }
    },
    showAddDialog() {
      this.editForm.id = null;
      this.editForm.name = '';
      this.dialogVisible = true;
    },
    showEditDialog(row) {
      this.editIndex = this.tableData.indexOf(row);
      this.editForm = { ...row };
      this.dialogVisible = true;
    },
    saveEdit() {
      if (this.editIndex > -1) {
        this.tableData.splice(this.editIndex, 1, this.editForm);
      } else {
        this.tableData.push({ id: this.tableData.length + 1, ...this.editForm });
      }
      this.dialogVisible = false;
    },
    deleteRow(index) {
      this.tableData.splice(index, 1);
    },
    reverseSearch(row) {
      // 反查功能逻辑
      console.log("反查：" + row.name);
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }

}
</script>