折叠面板+对自定义表格进行增删改查操作

在后端给予的接口的基础上完成（新手，有误请指出）

主要是生成表格中的列

在class=“table”的div外面加上添加按钮，调用接口，即可添加一个table表格 

v-for中的table为接口获取的表格数据（接口调用成功即可获取）

编辑+删除操作的对象都是table，传参来源于table中的数据

tableHead为表头信息，可以从后端返回的接口中获取（因为是新手，所以后端直接返回了表头的内容）

<template>
  <div>
      <div class="table">
          <el-collapse  style="padding-right: 10px" v-for="(item,key) in table" :key="key">
            <el-collapse-item>
              <template  slot="title">
                <div style="display: flex;justify-content: space-between;width: 100%">
                  <span style="font-size: 13px;line-height: 62px;padding-left: 10px">{{item.name}}</span>
                  <div style="text-align: center;margin: 10px;float: right;">
                   <!-- v-on:click.stop 阻止冒泡事件（在点击编辑/删除按钮时 折叠面板也会打开）  -->
                    <el-button type="success" size="small" v-on:click.stop="editTable(item)" >编辑</el-button>
                    <el-button type="danger" size="small" v-on:click.stop="deleteTable(item.id)">删除</el-button>
                  </div>
                </div>
              </template>
              <el-table height="400px" :data="item.dataList" border ref="table">
                <template v-for="(tableHeadItem,tableHeadKey) in item.tableHead">
                  <el-table-column :prop="tableHeadItem" :label="tableHeadItem" :key="tableHeadKey"></el-table-column>
                </template>
              </el-table>
            </el-collapse-item>
          </el-collapse>
        </div>
  </div>
</template>

删除操作

function deleteTable(id) {  //id为html中的参数
    const that = this;
    that.$confirm("是否删除该数据？",{
      confirmButtonText:that.$t('确定'),
      cancelButtonText:that.$t('取消'),
      type:'warning',
      callback:action => {
        if (action == 'confirm'){
          deleteById(id).then(res=>{  //调用接口，传参为id
            that.$message({
              message: "删除成功",
              type: "success",
            });
          }).catch(err=>{
            that.$message.warning("删除失败！")
          })
        }else{
          that.$message.warning("已取消删除！")
        }
      }
    })
  }

编辑（添加同理）

编辑的dialog页面

async function submitData() {  //点击dialog中的确定
  if (this.form.name == '' || this.form.sentence== '') {
    this.$message.warning("提交内容不能为空！");
    return false;
  } else {
      const result = await editTable(this.tabId, this.form.name, this.form.sentence)
      if (result.code == 1200) {
        this.$message.success("编辑成功！");
        this.dialogFormVisible = false;
      } else {
        this.$message.warning("编辑失败！")
      }
  }
}