适用于ElementUI的表格增删改模板

针对于Vue初学者的模板，可直接更改数值套用

用法：将表格中的数值和封装类型改成自己需要的即可，有小部分的问题，没有严谨的布局，大体功能已经实现，如有细小Bug，请私信老王

注意：axios必须已经导入

标签部分：

<template>
<div>
  <!-- 备注： inline=true 为强制为一行，否则 两个输入框会占用两行
            model=formInline  model是element自带的，绑定表单，将表单内容封装为一个对象

    -->
  <el-form :inline="true" :model="dept" class="demo-form-inline">
    <el-form-item label="部门编号">
      <el-input v-model="dept.deptId" placeholder="部门编号"></el-input>
    </el-form-item>
    <el-form-item label="部门名称">
      <el-input v-model="dept.deptName" placeholder="部门名称"></el-input>

    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
  <el-button  type="info" @click="add=true;dialog = true">信息按钮</el-button>

<!--弹窗-->
  <el-dialog
      :title="add?'部门信息新增':'部门信息修改'"
      :visible.sync="dialog"
      style="text-align:left !important"
      :before-close="handleClose"
  >
    <el-form :model="form" label-width="80px" ref="form">
      <el-form-item label="部门名称" prop="deptName">
        <el-input v-model="form.deptName" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div class="dialog-footer" slot="footer">
      <el-button type="primary" @click="dialog = false">取 消</el-button>
      <el-button type="success" @click="saveInfo(form)">保存</el-button>
    </div>
  </el-dialog>

  <el-table
      :data="tableData"
      border
  >
    <el-table-column
        fixed
        prop="deptId"
        label="部门编号">
    </el-table-column>
    <el-table-column
        prop="deptName"
        label="部门名称">
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作">
      <template slot-scope="scope">
        <el-button  @click="editRow(scope.$index,scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
        <el-button @click="deletedept(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <!--            <span class="demonstration">调整每页显示条数</span>-->
    <!--           current-page:当前访问的页数
                   :page-size 每页显示的条数
                   total 数据总条数
                   @current-change:改变页码触发函数
     -->
    <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total">
    </el-pagination>
  </div>
</div>

</template>

JS部分：

<script>
export default {
  name: "dept",
  data() {
    return {
      tableData: [],//存放 后台返回的data数组。也就是查询出来的内容
      total:0, //存放 总条数
      pageSize:5, //此部分备注在HTML部分
      currentPage:1,
      form: {},
      dialog: false,
      add: true,
      dept: { //封装的对象，为JSON格式，需自己修改
        deptId: '',
        deptName: ''
      }
    }


  },
  //页面加载执行，执行一次
  created(){
    this.initTaable();
  },
  methods:{
    initTaable(){
      let that = this;
      this.$ajax.post("此处填写访问地址，存在跨域问题").then(function (resp){
        if(resp.data.code===200){
          console.log(resp)
        }
      })
    },
    handleCurrentChange(val) {
      this.currentPage=val;
      this.initTaable();
    },
    onSubmit(){
      console.log(this.dept)
      this.initTaable()
    },
    //根据Id删除部门
    deletedept(row){
      let that = this;

      this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$ajax.delete(`此处填写路径，问题同上`).then(resp=>{
          // console.log(resp);
          if(resp.data.code===200){
            this.$message({
              message: '恭喜你，删除成功',
              type: 'success',
            });
            that.initTaable();
          }else{
            this.$message.error('出错了哦，删除失败');
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    saveInfo(form){
      //判定此状态是否为添加
      if(this.add==true){
      // console.log(form);
      let that = this;
      this.$ajax.post("此处填写路径").then(resp=>{
        // console.log(resp);
        if(resp.data.code===200){
          this.$message({
            message: '恭喜你，添加成功',
            type: 'success',
          });
          that.initTaable();
        }else{
          this.$message.error('出错了哦，添加失败');
        }
      })
      }else{
        alert("修改")
        //后续个人增添axios即可
      }
    },
    editRow(id, row){
      this.dialog = true
      this.add = false
      this._index = id
      this.form = Object.assign({}, row)
    }

  }
}
</script>

<style scoped>

</style>