element-ui 表格没有内容点击插入数据，有内容点击删除（vue）

记录一下，希望能够帮到大家。

<template>
  <div>
    <div class="tabs" style="display: flex;line-height: 20px">
      <button href="javascript:;" :class="{active: dialogFormVisible3}" @click="dialogFormVisible3=true" style="font-size: 18px!important;">单次流程</button>
      <button href="javascript:;" :class="{active: !dialogFormVisible3}" @click="dialogFormVisible3=false" style="font-size: 18px!important;">批量排课</button>
    </div>
    <div v-show="dialogFormVisible3" >
      <div style="margin:0.4rem 1rem;line-height: 40px;float: left">
        <el-dropdown @command="handleCommand" style="float: left">
                  <span class="el-dropdown-link">
                    选择教室<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="404" divided>404教室</el-dropdown-item>
            <el-dropdown-item command="405" divided>405教室</el-dropdown-item>
            <el-dropdown-item command="406" divided>406教室</el-dropdown-item>
            <el-dropdown-item command="407" divided>407教室</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="primary" style="float: left;margin-left: 6px">当前教室：{{houseid}}</el-button>

        <el-dropdown @command="handleCommand2" style="float: right;margin-right: 40px;">
                  <span class="el-dropdown-link">
                    选择学期<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="2022年秋" divided>2022年秋</el-dropdown-item>
            <el-dropdown-item command="2023年春" divided>2023年春</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="primary" style="float: right;margin-right: 10px;">当前学期：{{term}}</el-button>

        <br>

        <div>
          <el-select clearable v-model="form.teachid" placeholder="请选择教学班" style="width: 20%;float: left;margin: 10px 0;" @change="changeInfo">
            <el-option v-for="item in techids" :key="item.teachid" :label="item.teachid" :value="item.teachid"></el-option>
          </el-select>

          <el-button type="primary" class="ml-5" v-show="this.remindinfo!=''" style="float: left;margin: 10px 10px;">{{this.remindinfo.object}}</el-button>
        </div>

        <br>

        <div style="margin-top: 10px;float: left">
          <el-button type="primary" plain style="float: left;margin-right: 6px;" @click="changeleft">上一周 </el-button>
          <el-radio-group v-model="week" @change="changeAll" >
            <el-radio-button :label="1" >第1周</el-radio-button>
            <el-radio-button :label="2">第2周</el-radio-button>
            <el-radio-button :label="3">第3周</el-radio-button>
            <el-radio-button :label="4">第4周</el-radio-button>
            <el-radio-button :label="5">第5周</el-radio-button>
            <el-radio-button :label="6">第6周</el-radio-button>
            <el-radio-button :label="7">第7周</el-radio-button>
            <el-radio-button :label="8">第8周</el-radio-button>
            <el-radio-button :label="9">第9周</el-radio-button>
            <el-radio-button :label="10">第10周</el-radio-button>
            <el-radio-button :label="11">第11周</el-radio-button>
            <el-radio-button :label="12">第12周</el-radio-button>
          </el-radio-group>
          <el-button type="primary" plain style="margin-left: 0.1rem;" @click="changeright">下一周</el-button>
        </div>
      </div>
      <el-table :data="tableData2" border stripe header-cell-class-name="'headerBg'" @selection-change="handleSelectionChange" style="line-height: 10px" @cell-click="changeClick">
        <el-table-column prop="day" label="星期\节次" width="60"></el-table-column>
        <el-table-column prop="class1" label="第1-2节8:00-9:35" width="220" ></el-table-column>
        <el-table-column prop="class2" label="第3-5节9:50-12:15" width="220" ></el-table-column>
        <el-table-column prop="class3" label="第6-7节14:30-16:05" width="220"></el-table-column>
        <el-table-column prop="class4" label="第8-9节16:20-17:55" width="220"></el-table-column>
        <el-table-column prop="class5" label="第10-12节7:00-21:25"  width="220"></el-table-column>
      </el-table>

      <el-dialog title="课程信息" :visible.sync="dialogFormVisible" width="40%" style="line-height: 10px">
        <div v-show="form.teachid==null">抱歉，请先选择教学班</div>
        <div v-show="form.teachid!=null">
          <el-form label-width="70px" size="small" style="margin-bottom: 20px">
            你确定在此时间段排{{form.teachid}}教学班的课吗？
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </div>
      </el-dialog>

      <el-dialog title="你确定删除吗" :visible.sync="dialogFormVisible2" width="40%" style="line-height: 10px">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="save2">确 定</el-button>
      </el-dialog>
    </div>
    
    <div v-show="!dialogFormVisible3" style="margin: 0.8rem;line-height: 100px;float: left;width: 80%">
      <el-card  style="width: 100%;background-color: rgba(55,97,151,0.1)!important;color: #0CD1EA!important;display: inline-block;margin-top: 0.3rem;font-weight: bolder" class="panel" >
        <el-form label-width="100px" size="small" :model="form2" ref="pass">
          <el-form-item prop="houseid">
                        <span slot="label">
                            <span style="color: #024171">机房号</span>
                        </span>
            <el-select clearable v-model="form2.hoseid" placeholder="请选择机房号" style="width: 100%">
              <el-option v-for="item in houseids" :key="item.id" :label="item.id" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="week1">
                         <span slot="label">
                            <span style="color: #024171">起始周次</span>
                        </span>
            <el-input v-model="weeks.week1" autocomplete="off" placeholder="请填写起始周次"></el-input>
          </el-form-item>
          <el-form-item prop="week2">
                         <span slot="label">
                            <span style="color: #024171">结束周次</span>
                        </span>
            <el-input v-model="weeks.week2" autocomplete="off" placeholder="请填写结束周次"></el-input>
          </el-form-item>
          <el-form-item prop="day">
                    <span slot="label">
                        <span style="color: #024171">星期几</span>
                    </span>
            <el-select clearable v-model="form2.day" placeholder="请选择星期几" style="width: 100%">
              <el-option v-for="item in dayids" :key="item.day" :label="item.day" :value="item.day"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="depart">
                     <span slot="label">
                        <span style="color: #024171">时间段</span>
                    </span>
            <el-select clearable v-model="form2.timeid" placeholder="请选择时间段" style="width: 100%">
              <el-option v-for="item in timeids" :key="item.time" :label="item.time" :value="item.time"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="teachid">
                         <span slot="label">
                            <span style="color: #024171">教学班号</span>
                        </span>
            <el-select clearable v-model="form2.teachid" placeholder="请选择教学班" style="width: 100%">
              <el-option v-for="item in techids" :key="item.teachid" :label="item.teachid" :value="item.teachid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="term">
                         <span slot="label">
                            <span style="color:#024171">学期</span>
                        </span>
            <el-select clearable v-model="form2.term" placeholder="请选择学期" style="width: 100%">
              <el-option v-for="item in termids" :key="item.term" :label="item.term" :value="item.term"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item style="margin-left: 38%">
            <el-button type="primary" style="background-color: #1F52A5!important;" @click="save3">确 定</el-button>

            <el-button type="primary" style="background-color: #1F52A5!important;" @click="form2 = {}">取 消</el-button>
          </el-form-item>
        </el-form>
      </el-card>

    </div>

  </div>
</template>

<script>

  export default {
    name: "Home",
    data(){
      return {
        term:'2023年春',
        id:0,
        pageNum: 1,
        pageSize: 20,
        tableData: [],
        tableData2:[],
        weekAll:[],
        timeAll:[],
        timeid:1,
        houseid: 407,
        week: 1,
        day:1,
        form: {},
        form2: {},
        weeks:{},
        dialogFormVisible: false,
        dialogFormVisible2: false,
        dialogFormVisible3: true,
        user:localStorage.getItem("user") ?JSON.parse(localStorage.getItem("user")) : {},
        multipleSelection: [],
        total: 0,
        info:[],
        radio1: '第一周',
        classArr:[],
        techids:[],
        timeids:[{'time':1},{'time':2},{'time':3},{'time':4},{'time':5}],
        dayids:[{'day':1},{'day':2},{'day':3},{'day':4},{'day':5},{'day':6},{'day':7}],
        houseids:[{'id':404},{'id':405},{'id':406},{'id':407}],
        termids:[{'term':'2022年秋'},{'term':'2023年春'}],
        remindinfo:"",

      }
    },
    mounted() {
      this.changeAll();
    },
    computed:{
      sortedItems(){
        return this.tableData.sort((a,b)=>a.day - b.day)
      }
    },
    methods:{
    　//这个是第二页的批量排课的。上面的图没有显示出来，但是运行这些代码会有
      save3(){
        if(Number(this.weeks.week1)>Number(this.weeks.week2)){
          this.$message.error('抱歉，你输入的周次存在逻辑错误！')
        }
        else {
          //请求分页查询数据
          this.$http.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
          this.$http.get("/api/classes/search",{

            params: {
              hoseid:this.form2.hoseid,
              term:this.form2.term,
            }
          }).then(res => {
            this.timeAll=[]
            this.weekAll=[]
            var temp = [];
            temp = res.data.object;
            for(var i=0;i<temp.length;i++) {
              this.timeAll.push(temp[i].timeid)
              this.weekAll.push(temp[i].week)
            }


            var flag =true;
            for(var i=this.weeks.week1;i<=this.weeks.week2;i++) {
              for (var j = 0; j < this.weekAll.length && flag; j++) {
                if (this.weekAll[j] == i && this.timeAll[j] == this.form2.timeid) {
                  this.$message.error('抱歉，第' + this.form2.term + '学期' + '第' + this.form2.hoseid + '教室' + i + '周' + '星期' + this.day + "的" + this.form2.timeid + '时间段已有排课安排');
                  flag = false;
                  break
                }
              }
            }

            if (flag) {

            for(var i=this.weeks.week1;i<=this.weeks.week2;i++) {
                this.form2.week = i;
                this.$http.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
                this.$http.post("/api/classes", this.form2).then(res => {
                  if (res.data) {
                    this.changeAll();
                  } else {
                    this.$message.error("保存失败")
                  }
                })

              }
            this.$message.success("批量排课成功")
            }

          })
        }
      },

		　//点击确认排课后调用的方法
      save(){
        this.form.hoseid = this.houseid;
        this.form.week=this.week;
        this.form.day=this.day;
        this.form.timeid=this.timeid;
        this.form.term = this.term;
        this.$http.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
        this.$http.post("/api/classes", this.form).then(res => {
          if(res.data) {
            this.$message.success("保存成功");
            this.dialogFormVisible = false;
            this.changeAll();
          }else{
            this.$message.error("保存失败")
          }
        })
      },
      
		 // 点击确认删除后调用的方法
      save2(){
        this.$http.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
        this.$http.delete('/api/classes/' + this.id).then(res => {
          if(res.data){
            this.$message.success("删除成功")
            this.dialogFormVisible2=false
            this.changeAll();
          }else{
            this.$message.error("删除失败")
          }
        })
      },
      
      // 点击表格后调用的方法，会先判断一下表格是否有值
      changeClick(row,column,cell,event){
          this.day = row.day
          if (row[column.property] != null) {
            this.dialogFormVisible2 = true;
            if (column.label === '第1-2节8:00-9:35') {
              this.timeid = 1;
              this.id = row.id1;
            } else if (column.label === '第3-5节9:50-12:15') {
              this.timeid = 2;
              this.id = row.id2;
            } else if (column.label === '第6-7节14:30-16:05') {
              this.timeid = 3;
              this.id = row.id3;
            } else if (column.label === '第8-9节16:20-17:55') {
              this.timeid = 4;
              this.id = row.id4;
            } else if (column.label === '第10-12节7:00-21:25') {
              this.timeid = 5;
              this.id = row.id5;
            }
          } else {
            this.dialogFormVisible = true
            if (column.label === '第1-2节8:00-9:35') {
              this.timeid = 1;
            } else if (column.label === '第3-5节9:50-12:15') {
              this.timeid = 2;
            } else if (column.label === '第6-7节14:30-16:05') {
              this.timeid = 3;
            } else if (column.label === '第8-9节16:20-17:55') {
              this.timeid = 4;
            } else if (column.label === '第10-12节7:00-21:25') {
              this.timeid = 5;
            }
        }
      },
      
      // 这个是用来显示该教学班详细信息的
      changeInfo(){
        this.$http.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
        this.$http.get('/api/classes/' + this.form.teachid).then(res => {
          this.remindinfo=res.data;
        });
      },

		 //点击上一周
      changeleft(){
        if(this.week!=1) {
          this.week = this.week - 1
          this.changeAll();
        }
      },
      
　　　//点击下一周
      changeright(){
        if(this.week!=12) {
          this.week = this.week + 1
          this.changeAll();
        }
      },
      
      changeAll(){
        this.load();

			 //下面这两个都是用来接下拉框显示的值的。
        this.$http.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
        this.$http.get("/api/teach").then(res =>{
          this.techids = res.data.object;
        })
  
        this.$http.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
        this.$http.get("/api/teach").then(res =>{
          this.hoseids = res.data.object;
        })
      },

      handleCommand(command) {
        this.houseid = command;
        this.changeAll();
        this.$message('更改教室成功,当前教室为' + command);
      },
      
      handleCommand2(command) {
        this.term = command;
        this.changeAll();
        this.$message('更改学期成功,当前学期为' + command);
      },
      
      load(){
      　//请求后台数据，也就是表格中的数据
        const _this = this;
        this.$http.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
        this.$http.get("/api/classes/page",{
          params: {
            currentPage:this.pageNum,
            pageSize:this.pageSize,
            hoseid:this.houseid,
            week:this.week,
            term:this.term,
          }
        }).then(res => {
          _this.tableData = res.data.object.userInfo;
          _this.tableData.sort((a,b)=>a.classes.day - b.classes.day)
          _this.infoImport();

          this.total = res.data.object.totals;
        })
      },
      
      handleSelectionChange(val){
        this.multipleSelection = val
      },
      //这个函数是处理返回的数据的用来显示，看起来有些复杂，其实就是新建一个数组，重新赋值用来显示的
      finalCut(){
        var _this = this;
        var tempday = 1;
        _this.tableData2 = [];
        _this.tableData2.push({'day':tempday});
        if(_this.tableData[0].classes.timeid != null) {
          if (_this.tableData[0].classes.timeid == 1) {
            _this.$set(_this.tableData2[0], 'class1', _this.tableData[0].class1)
            _this.$set(_this.tableData2[0], 'id1', _this.tableData[0].classes.id)
          } else if (_this.tableData[0].classes.timeid == 2) {
            _this.$set(_this.tableData2[0], 'class2', _this.tableData[0].class2)
            _this.$set(_this.tableData2[0], 'id2', _this.tableData[0].classes.id)
          } else if (_this.tableData[0].classes.timeid == 3) {
            _this.$set(_this.tableData2[0], 'class3', _this.tableData[0].class3)
            _this.$set(_this.tableData2[0], 'id3', _this.tableData[0].classes.id)
          } else if (_this.tableData[0].classes.timeid == 4) {
            _this.$set(_this.tableData2[0], 'class4', _this.tableData[0].class4)
            _this.$set(_this.tableData2[0], 'id4', _this.tableData[0].classes.id)
          } else if (_this.tableData[0].classes.timeid == 5) {
            _this.$set(_this.tableData2[0], 'class5', _this.tableData[0].class5)
            _this.$set(_this.tableData2[0], 'id5', _this.tableData[0].classes.id)
          }
        }

        for(var j=1;j<_this.tableData.length;j++) {

          if (_this.tableData[j].classes.day != tempday){
            tempday = tempday + 1;
            _this.tableData2.push({'day':tempday})
          }
          if(_this.tableData[j].classes.timeid != null) {
            if (_this.tableData[j].classes.timeid == 1) {
              _this.$set(_this.tableData2[tempday-1], 'class1', _this.tableData[j].class1)
              _this.$set(_this.tableData2[tempday-1], 'id1', _this.tableData[j].classes.id)
            }
            else if(_this.tableData[j].classes.timeid == 2){
              _this.$set(_this.tableData2[tempday-1],'class2',_this.tableData[j].class2)
              _this.$set(_this.tableData2[tempday-1], 'id2', _this.tableData[j].classes.id)
            }
            else if(_this.tableData[j].classes.timeid == 3){
              _this.$set(_this.tableData2[tempday-1],'class3',_this.tableData[j].class3)
              _this.$set(_this.tableData2[tempday-1], 'id3', _this.tableData[j].classes.id)

            }
            else if(_this.tableData[j].classes.timeid == 4){
              _this.$set(_this.tableData2[tempday-1],'class4',_this.tableData[j].class4)
              _this.$set(_this.tableData2[tempday-1], 'id4', _this.tableData[j].classes.id)
            }
            else if(_this.tableData[j].classes.timeid == 5){
              _this.$set(_this.tableData2[tempday-1],'class5',_this.tableData[j].class5)
              _this.$set(_this.tableData2[tempday-1], 'id5', _this.tableData[j].classes.id)
            }
          }
        }
      },
      //下面这个函数是用来将即使某一天没有课，也要显示显示出一行空格
      infoImport(){
        const _this = this;
          for(var l=1;l<=7;l++) {
            for (var k = 0; k < _this.tableData.length; k++) {
              if (l == _this.tableData[k].classes.day){
                break;
              }
            }
            if(k==_this.tableData.length){
              _this.tableData.unshift({'classes':{day:l}})
            }
          }
          _this.tableData.sort((a,b)=>a.classes.day - b.classes.day)
          this.finalCut();
      },
    }
  }
</script>

后端代码这里就不上传了，传个数据库吧：

加油，相信你是最棒的！！！文章来源地址https://uudwc.com/A/0r5mP