使用vue实现增删改查操作适合初学者

首先得是查询

先画表格

 <!-- 数据列表 -->
    <el-table :data="pageResult.content" @row-click="clickRow" style="width: 100%" stripe border :size="size"
              :height="tableHeight" v-loading="tabieLoading" element-loading-text="加载中..." @selection-change="selsChange"
              :row-class-name="tableRowClassName" ref="table">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="序号" width="80" align="center" show-overflow-tooltip />
      <el-table-column prop="varietyName" label="品种名称" width="150" align="center" show-overflow-tooltip />
      <el-table-column prop="planPeople" label="计划人" width="150" align="center" show-overflow-tooltip />
      <el-table-column prop="approvePeople" label="审核人" width="150" align="center" show-overflow-tooltip />
      <el-table-column prop="status" label="状态" width="100" align="center" show-overflow-tooltip />
      <el-table-column prop="createPeople" label="创建人" width="150" align="center" />
      <el-table-column prop="createTime" label="创建时间" width="200" align="center" show-overflow-tooltip />
      <el-table-column prop="updatePeople" label="修改人" width="100" align="center" show-overflow-tooltip />
      <el-table-column prop="updateTime" label="修改时间" width="200" align="center" show-overflow-tooltip />
      <el-table-column label="操作" width="150" align="left" fixed="right">
        <template slot-scope="scope">
          <el-button style="width:50px;padding: 0px;margin: 0px;"size="mini"
                     type="text" icon="el-icon-edit"
                     @click="handleEdit(scope.row)">修改</el-button>
          <el-button style="width:50px;padding: 0px;margin: 0px;"size="mini"
                     type="text" icon="el-icon-remove"
                     @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:5px 10px;">
      <el-pagination layout="total, prev, pager, next, jumper,sizes" @current-change="refreshPageRequest"
                     @size-change="handleSizeChange" :current-page="pageRequest.pageNum" :page-size="pageRequest.pageSize"
                     :total="pageResult.totalSize" style="float:right;"></el-pagination>
    </div>


<script>
  export default {
    data() {
      return {
        tableHeight: 480,
        tabieLoading: false,
        size: 'small',
        filters: {
          dataForm:''
        },
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        },
        pageResult: {},
        selectID:[],
        operation: false, // true:新增, false:编辑
        editDialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        dataFormRules: {
         
        },

      }
    },
    methods: {
      // 选中背景色
      tableRowClassName({ row, rowIndex }) {
        let color = ''
        for(let item of this.selectID.values()){
          if(item === row.id)color = 'table-SelectedRow-bgcolor'
        }
        return color
      },
      search: function() {
        this.$refs.table.refreshPageRequest(1)
      },
      // 换页刷新
      refreshPageRequest: function(pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.findPage();
      },
      //页显示数刷新
      handleSizeChange: function(val) {
        this.pageRequest.pageSize = val;
        this.findPage();
      },
      // 获取分页数据
      findPage: function() {
        this.pageRequest.columnFilters = {
          varietyName: {name: 'varietyName',value: this.filters.varietyName},
          approvePeople: {name: 'approvePeople',value: this.filters.approvePeople},
          planPeople:  {name: 'planPeople', value: this.filters.planPeople}
        }
        this.$api.dailyPlan.findPage(this.pageRequest).then((res) => {
          this.pageResult = res.data
        }).catch((res) => {
          //this.logining = false
          this.$message({
            message: res.message,
            type: 'error'
          })
        })
      },
    
      clickRow(row){
        var same=false;
        if(this.selectID.length > 0){
          for(var i=0; i<this.selectID.length ;i++){
            if(this.selectID[i]==row.id){
              same=true;
              this.selectID.splice(i,1);
              break;
            }
          }
          if(same == false){
            this.selectID.push(row.id);
          }
        }else{
          this.selectID.push(row.id);
        }
        this.$refs.table.toggleRowSelection(row);
      },
      selsChange(val){
        var valId=[];
        for(var i=0;i<val.length;i++){
          valId.push(val[i].id);
        }
        this.selectID=valId;
      },
     

    created() {
      this.findPage();
      this.findByCodeType();
      this.approvePeopleInfo();
    },
    mounted() {

    }
  }
</script>

新增修改我写一起了 也能分开用多个页面

 <!--新增编辑界面-->
    <el-dialog :title="operation?'新增':'编辑'" width="40%" :visible.sync="editDialogVisible" :close-on-click-modal="false">
      <el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm" :size="size">

        <el-form-item label="品种名称" prop="varietyId">
          <el-select v-model="dataForm.varietyId" filterable clearable placeholder="请选择品种名称" style="width:80%;">
            <el-option v-for="item in varietyNameList" :key="item.id" :label="item.varietyName"  :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划人" prop="planPeopleId">
          <el-select v-model="dataForm.planPeopleId" filterable clearable placeholder="请选择计划人" style="width:80%;">
            <el-option v-for="item in planPeopleList" :key="item.id" :label="item.planPeople" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核人" prop="approvePeopleId">
          <el-select v-model="dataForm.approvePeopleId"  filterable clearable placeholder="请选择审核人" style="width:80%;">
            <el-option v-for="item in approvePeopleList" :key="item.id" :label="item.approvePeople" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="editDialogVisible = false">取消</el-button>
        <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>


<script>
  export default {
    data() {
      return {
        tableHeight: 480,
        tabieLoading: false,
        size: 'small',
        filters: {
          varietyId: '',
          planPeopleId:'',
          approvePeopleId:'',
          dataForm:''
        },
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        },
        pageResult: {},
        selectID:[],
        operation: false, // true:新增, false:编辑
        editDialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        dataFormRules: {
          varietyId: [{required: true,message: '请输入品种名称',trigger: 'blur'}],
          approvePeopleId: [{required: true,message: '请输入审核人',trigger: 'blur'}],
          planPeopleId: [{required: true,message: '请输入计划人',trigger: 'blur'}]
        },
        // 新增编辑界面数据
        dataForm: {
          // varietyName: null,
          // planPeopleId: undefined,
          // approvePeopleId: undefined,
          // varietyId: undefined,
        },
        planPeopleList:[],
        approvePeopleList:[],
        varietyNameList:[],
      }
    },

      // 删除
      handleDelete: function(params) {
        let data = {id:params.id}
        this.$confirm('确定要删除该条数据吗？', '提示', {}).then(() => {
          this.$api.dailyPlan.deleteById(data).then((res) => {
            if (res.code == 200) {
              this.$message({message: '删除成功', type: 'success'})
              this.findPage()
            } else {
              this.$message({ message: '删除失败, ' + res.msg, type: 'error'})
            }
          }).catch((res) => {
            this.$message({message: res.message,type: 'error'})
          })
        })
      },
      // 显示新增界面
      handleAdd: function() {
        this.editDialogVisible = true
        this.operation = true
        this.dataForm = {
          // planPeopleId: null,
          // approvePeopleId: null,
          // varietyId: null,
        }
      },
      // 显示编辑界面
      handleEdit: function(params) {
        this.editDialogVisible = true
        this.operation = false
        // this.dataForm = Object.assign({}, params)

        if (params.id != null && params.id != "") {
          this.findById(params.id);
        }

      },
      // 编辑
      submitForm: function() {
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.editLoading = true
              let params = Object.assign({}, this.dataForm)
              this.$api.dailyPlan.save(params).then((res) => {
                if (res.code == 200) {
                  this.$message({
                    message: '操作成功',
                    type: 'success'
                  })
                  this.editDialogVisible = false
                } else {
                  this.$message({
                    message: '操作失败, ' + res.msg,
                    type: 'error'
                  })
                }

                this.editLoading = false
                this.$refs['dataForm'].resetFields()
                this.findPage()
              }).catch((res) => {
                this.editLoading = false
                this.$message({
                  message: res.message,
                  type: 'error'
                })
              })
            })
          }
        })
      },

      //查询所有数据类型(品种)
      findByCodeType:function(){
        this.$api.dailyPlan.queryCodeByCodeName().then((res)=>{
          this.varietyNameList = res.data;
        })
      },

      //查询追加人和审批人
      approvePeopleInfo:function(){
        this.$api.dailyPlan.findByapprovePeopleAndPlanPeople().then((res)=>{
          this.planPeopleList = res.data;
          this.approvePeopleList = res.data;
        })
      },

      findById:function(id){

        let params = { id: id };
        this.$api.dailyPlan.findById(params).then(res => {
          this.dataForm = res.data;

        });
      },
    },
   
  }
</script>

完整代码

<template>
  <!--style="width:99%;margin-top:-25px;"-->
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:5px;">
      <el-form :inline="true" :model="filters" :size="size" style="margin-bottom:5px;">

        <el-form-item style="margin-bottom:0px;">
          <el-select v-model="filters.varietyName" filterable clearable placeholder="品种" style="width:140px;">
            <el-option v-for="(item,index)  in varietyNameList":key="index" :label="item.varietyName":value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="margin-bottom:0px;">
          <el-select v-model="filters.approvePeople" filterable clearable placeholder="审核人" style="width:140px;">
            <el-option v-for="(item,index)  in approvePeopleList":key="index" :label="item.approvePeople":value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="margin-bottom:0px;">
          <el-select v-model="filters.planPeople" filterable clearable placeholder="计划人" style="width:140px;">
            <el-option v-for="(item,index)  in planPeopleList":key="index" :label="item.planPeople":value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="margin-bottom:0px;">
          <el-button :size="size" type="primary" icon="el-icon-search" @click="findPage()">查询</el-button>
        </el-form-item>

        <el-form-item style="margin-bottom:0px;">
          <el-button :size="size" type="success" icon="el-icon-check" @click="handleAdd()">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--表格内容栏-->

    <!-- 数据列表 -->
    <el-table :data="pageResult.content" @row-click="clickRow" style="width: 100%" stripe border :size="size"
              :height="tableHeight" v-loading="tabieLoading" element-loading-text="加载中..." @selection-change="selsChange"
              :row-class-name="tableRowClassName" ref="table">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="序号" width="80" align="center" show-overflow-tooltip />
      <el-table-column prop="varietyName" label="品种名称" width="150" align="center" show-overflow-tooltip />
      <el-table-column prop="planPeople" label="计划人" width="150" align="center" show-overflow-tooltip />
      <el-table-column prop="approvePeople" label="审核人" width="150" align="center" show-overflow-tooltip />
      <el-table-column prop="status" label="状态" width="100" align="center" show-overflow-tooltip />
      <el-table-column prop="createPeople" label="创建人" width="150" align="center" />
      <el-table-column prop="createTime" label="创建时间" width="200" align="center" show-overflow-tooltip />
      <el-table-column prop="updatePeople" label="修改人" width="100" align="center" show-overflow-tooltip />
      <el-table-column prop="updateTime" label="修改时间" width="200" align="center" show-overflow-tooltip />
      <el-table-column label="操作" width="150" align="left" fixed="right">
        <template slot-scope="scope">
          <el-button style="width:50px;padding: 0px;margin: 0px;"size="mini"
                     type="text" icon="el-icon-edit"
                     @click="handleEdit(scope.row)">修改</el-button>
          <el-button style="width:50px;padding: 0px;margin: 0px;"size="mini"
                     type="text" icon="el-icon-remove"
                     @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:5px 10px;">
      <el-pagination layout="total, prev, pager, next, jumper,sizes" @current-change="refreshPageRequest"
                     @size-change="handleSizeChange" :current-page="pageRequest.pageNum" :page-size="pageRequest.pageSize"
                     :total="pageResult.totalSize" style="float:right;"></el-pagination>
    </div>

    <!--新增编辑界面-->
    <el-dialog :title="operation?'新增':'编辑'" width="40%" :visible.sync="editDialogVisible" :close-on-click-modal="false">
      <el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm" :size="size">

        <el-form-item label="品种名称" prop="varietyId">
          <el-select v-model="dataForm.varietyId" filterable clearable placeholder="请选择品种名称" style="width:80%;">
            <el-option v-for="item in varietyNameList" :key="item.id" :label="item.varietyName"  :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划人" prop="planPeopleId">
          <el-select v-model="dataForm.planPeopleId" filterable clearable placeholder="请选择计划人" style="width:80%;">
            <el-option v-for="item in planPeopleList" :key="item.id" :label="item.planPeople" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核人" prop="approvePeopleId">
          <el-select v-model="dataForm.approvePeopleId"  filterable clearable placeholder="请选择审核人" style="width:80%;">
            <el-option v-for="item in approvePeopleList" :key="item.id" :label="item.approvePeople" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="editDialogVisible = false">取消</el-button>
        <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableHeight: 480,
        tabieLoading: false,
        size: 'small',
        filters: {
          varietyId: '',
          planPeopleId:'',
          approvePeopleId:'',
          dataForm:''
        },
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        },
        pageResult: {},
        selectID:[],
        operation: false, // true:新增, false:编辑
        editDialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        dataFormRules: {
          varietyId: [{required: true,message: '请输入品种名称',trigger: 'blur'}],
          approvePeopleId: [{required: true,message: '请输入审核人',trigger: 'blur'}],
          planPeopleId: [{required: true,message: '请输入计划人',trigger: 'blur'}]
        },
        // 新增编辑界面数据
        dataForm: {
          // varietyName: null,
          // planPeopleId: undefined,
          // approvePeopleId: undefined,
          // varietyId: undefined,
        },
        planPeopleList:[],
        approvePeopleList:[],
        varietyNameList:[],
      }
    },
    methods: {
      // 选中背景色
      tableRowClassName({ row, rowIndex }) {
        let color = ''
        for(let item of this.selectID.values()){
          if(item === row.id)color = 'table-SelectedRow-bgcolor'
        }
        return color
      },
      search: function() {
        this.$refs.table.refreshPageRequest(1)
      },
      // 换页刷新
      refreshPageRequest: function(pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.findPage();
      },
      //页显示数刷新
      handleSizeChange: function(val) {
        this.pageRequest.pageSize = val;
        this.findPage();
      },
      // 获取分页数据
      findPage: function() {
        this.pageRequest.columnFilters = {
          varietyName: {name: 'varietyName',value: this.filters.varietyName},
          approvePeople: {name: 'approvePeople',value: this.filters.approvePeople},
          planPeople:  {name: 'planPeople', value: this.filters.planPeople}
        }
        this.$api.dailyPlan.findPage(this.pageRequest).then((res) => {
          this.pageResult = res.data
        }).catch((res) => {
          //this.logining = false
          this.$message({
            message: res.message,
            type: 'error'
          })
        })
      },
      // 删除
      handleDelete: function(params) {
        let data = {id:params.id}
        this.$confirm('确定要删除该条数据吗？', '提示', {}).then(() => {
          this.$api.dailyPlan.deleteById(data).then((res) => {
            if (res.code == 200) {
              this.$message({message: '删除成功', type: 'success'})
              this.findPage()
            } else {
              this.$message({ message: '删除失败, ' + res.msg, type: 'error'})
            }
          }).catch((res) => {
            this.$message({message: res.message,type: 'error'})
          })
        })
      },
      // 显示新增界面
      handleAdd: function() {
        this.editDialogVisible = true
        this.operation = true
        this.dataForm = {
          // planPeopleId: null,
          // approvePeopleId: null,
          // varietyId: null,
        }
      },
      // 显示编辑界面
      handleEdit: function(params) {
        this.editDialogVisible = true
        this.operation = false
        // this.dataForm = Object.assign({}, params)

        if (params.id != null && params.id != "") {
          this.findById(params.id);
        }

      },
      // 编辑
      submitForm: function() {
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.editLoading = true
              let params = Object.assign({}, this.dataForm)
              this.$api.dailyPlan.save(params).then((res) => {
                if (res.code == 200) {
                  this.$message({
                    message: '操作成功',
                    type: 'success'
                  })
                  this.editDialogVisible = false
                } else {
                  this.$message({
                    message: '操作失败, ' + res.msg,
                    type: 'error'
                  })
                }

                this.editLoading = false
                this.$refs['dataForm'].resetFields()
                this.findPage()
              }).catch((res) => {
                this.editLoading = false
                this.$message({
                  message: res.message,
                  type: 'error'
                })
              })
            })
          }
        })
      },

      clickRow(row){
        var same=false;
        if(this.selectID.length > 0){
          for(var i=0; i<this.selectID.length ;i++){
            if(this.selectID[i]==row.id){
              same=true;
              this.selectID.splice(i,1);
              break;
            }
          }
          if(same == false){
            this.selectID.push(row.id);
          }
        }else{
          this.selectID.push(row.id);
        }
        this.$refs.table.toggleRowSelection(row);
      },
      selsChange(val){
        var valId=[];
        for(var i=0;i<val.length;i++){
          valId.push(val[i].id);
        }
        this.selectID=valId;
      },
      //查询所有数据类型(品种)
      findByCodeType:function(){
        this.$api.dailyPlan.queryCodeByCodeName().then((res)=>{
          this.varietyNameList = res.data;
        })
      },

      //查询追加人和审批人
      approvePeopleInfo:function(){
        this.$api.dailyPlan.findByapprovePeopleAndPlanPeople().then((res)=>{
          this.planPeopleList = res.data;
          this.approvePeopleList = res.data;
        })
      },

      findById:function(id){

        let params = { id: id };
        this.$api.dailyPlan.findById(params).then(res => {
          this.dataForm = res.data;

        });
      },
    },
    created() {
      this.findPage();
      this.findByCodeType();
      this.approvePeopleInfo();
    },
    mounted() {

    }
  }
</script>

<style scoped>

</style>

后台代码待补充