表格样式并不能是难点 主要是点击新增按钮和删除按钮自增的编号的修改

 <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{background:'#3d80f2',color:'#fff',fontSize:'16px',height:'55px'}"
        >
          <el-table-column prop="numbering" label="编号" width="180"></el-table-column>
          <el-table-column prop="title" label="标题">
            <template slot-scope="scope">
              <el-input v-model="scope.row.title" placeholder="请输入" style="100px"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="trainingType" label="培训类别" width="180">
            <template slot-scope="scope">
              <el-select v-model="scope.row.trainingType" placeholder="请选择" clearable>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="trainingForm" label="培训形式" width="180">
            <template slot-scope="scope">
              <el-select v-model="scope.row.trainingForm" multiple placeholder="请选择">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="trainingPlanTime" label="培训计划时间" width="180">
            <template slot-scope="scope">
              <el-select v-model="scope.row.trainingPlanTime" multiple placeholder="请选择">
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="organizationalUnit" label="组织单位/部门" width="180">
            <template slot-scope="scope">
              <el-select v-model="scope.row.organizationalUnit" placeholder="请选择">
                <el-option
                  v-for="item in options4"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="fullAmount" label="是否全额" width="180">
            <template slot-scope="scope">
              <el-select v-model="scope.row.fullAmount" placeholder="请选择" clearable>
                <el-option
                  v-for="item in options5"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-input
                v-model="scope.row.cost"
                placeholder="请输入金额"
                v-if="scope.row.fullAmount == '选项2'"
                style="margin-top:10px"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="trainingDepartment" label="培训部门" width="180">
            <template slot-scope="scope">
              <el-cascader
                :options="options6"
                :props="propstrue"
                clearable
                v-model="scope.row.trainingDepartment"
              ></el-cascader>
            </template>
          </el-table-column>
          <el-table-column prop="trainers" label="培训人员" width="180">
            <template slot-scope="scope">
              <el-cascader
                :options="options6"
                :props="propstrue"
                clearable
                v-model="scope.row.trainers"
              ></el-cascader>
            </template>
          </el-table-column>
          <el-table-column prop="trainingLocation" label="培训地点" width="180">
            <template slot-scope="scope">
              <el-input v-model="scope.row.trainingLocation" placeholder="请输入" style="100px"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

data(){
return{
 tableData: [
        {
          numbering: "编号-1",
          title: "",
          trainingType: "",
          trainingForm: "",
          trainingPlanTime: "",
          organizationalUnit: "",
          fullAmount: "",
          trainingDepartment: "",
          trainers: "",
          trainingLocation: "",
          cost: ""
        }
      ],
}}

关键在这里
新增方法和删除方法

//新增方法
addClick() {
      this.valNumer = this.valNumer + 1;
      var list = {
        numbering: "编号" + `-${this.tableData.length + 1}`,
        title: this.title,
        trainingType: this.trainingType,
        trainingForm: this.trainingForm,
        trainingPlanTime: this.trainingPlanTime,
        organizationalUnit: this.organizationalUnit,
        fullAmount: this.fullAmount,
        trainingDepartment: this.trainingDepartment,
        trainers: this.trainers,
        trainingLocation: this.trainingLocation,
        cost: this.cost
      };
      this.tableData.push(list);
    },
    //删除新增的某行数据
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
      for (var i = index; i < this.tableData.length; i++) {//从某一行删除了编号，删除的编号后面的编号数据要依次减一，所以遍历删除编号后面的数据
        this.tableData[i].numbering ="编号" + `-${Number(this.tableData[i].numbering.split("-")[1]) - 1}`;
      }
    }