element动态添加删除表格的行数

新增 

<template>
  <el-form label-width="100px" :model="form" ref="form" >
    <el-row>
      <el-col :span="5">
        <el-form-item label="表名称" prop="tableName" label-width="120px" style="margin-top:20px">
          <el-input v-model="form.tableName" placeholder="请输入表名称" style="width:240px"/>
        </el-form-item>
      </el-col>
      <el-col :span="5">
      <el-form-item label="表中文名称" prop="tableComment" label-width="120px" style="margin-top:20px">
          <el-input v-model="form.tableComment" placeholder="请输入表中文名称" style="width:240px"/>
        </el-form-item>
      </el-col>
      <el-col :span="5">
      <el-form-item label="系统编码" prop="sysNo" label-width="120px" style="margin-top:20px">
          <template>
            <el-select v-model="form.sysNo" style="width:240px">
              <el-option label="利率报备" value="SYS004" />
              <el-option label="east" value="SYS002" />
            </el-select>
          </template>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="表类型" prop="tableType" label-width="120px" style="margin-top:20px">
          <template>
            <el-select v-model="form.tableType" style="width:240px">
              <el-option label="状态表" value="status" />
              <el-option label="记录表" value="record" />
            </el-select>
          </template>
        </el-form-item>
      </el-col>
    </el-row>
  <el-table
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column
      label="字段列名"
      prop="columnName"
      :show-overflow-tooltip="true"
      min-width="70%"
      align="center"
    >
      <template slot-scope="scope">
        <el-input v-model="scope.row.columnName"></el-input>
      </template>
    </el-table-column>
    <el-table-column
      label="字段描述"
      prop="columnComment"
      min-width="70%"
      :show-overflow-tooltip="true"
      align="center"
    >
      <template slot-scope="scope">
        <el-input v-model="scope.row.columnComment"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="数据类型" min-width="50%" align="center">
      <template slot-scope="scope">
        <el-select v-model="scope.row.columnType">
          <el-option label="varchar" value="varchar" />
          <el-option label="char" value="char" />
          <el-option label="int" value="int" />
          <el-option label="bigint" value="bigint" />
          <el-option label="double" value="double" />
          <el-option label="datetime" value="datetime" />
          <el-option label="timestamp" value="timestamp" />
          <el-option label="Integer" value="Integer" />
          <el-option label="decimal" value="decimal" />
          <el-option label="date" value="date" />
        </el-select>
      </template>
    </el-table-column>
      <el-table-column label="数据长度" min-width="35%" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.columnLength" type="number" :min="0"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="小数点" min-width="35%" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.columnPoint" type="number" :min="0"></el-input>
        </template>
      </el-table-column>
    <el-table-column label="能否为空" min-width="50%" align="center">
      <template slot-scope="scope">
        <el-select v-model="scope.row.defaultNull">
          <el-option label="是" value="Y" />
          <el-option label="否" value="N" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="默认值" min-width="40%" align="center">
      <template slot-scope="scope">
        <el-input v-model="scope.row.defaultValue" ></el-input>
      </template>
    </el-table-column>
    <el-table-column label="是否主键" min-width="50%" align="center">
      <template slot-scope="scope">
        <el-select v-model="scope.row.pkValue">
          <el-option label="是" value="Y" />
          <el-option label="否" value="N" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column
      label="主键类型"
      prop="primaryKeyType"
      min-width="50%"
      align="center"
    >
      <template slot-scope="scope">
        <el-input v-model="scope.row.primaryKeyType"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="排序" min-width="35%" align="center">
      <template slot-scope="scope">
        <el-input v-model="scope.row.columnOrder" type="number" :min="0"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" min-width="50%">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="addLine(scope.$index, scope.row)"
        >增加
        </el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          v-if="scope.$index !=0"
        >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
      <el-button type="primary" @click="save()">提交</el-button>
      <el-button @click="close()">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>


import { addPrebuild, updatePrebuild } from '@/api/dcm/prebuild'

export default {
  data() {
    return {

      form:{
        tableName:"",
        tableComment:"",
        tableType:"",
        appTableColumnRecordList:[]
      },
      tableData: [{
        columnName: '',
        columnComment: '',
        primaryKeyType:'',
        columnType: 'varchar',
        columnLength: 0,
        columnPoint: 0,
        defaultNull: 'N',
        defaultValue: '',
        pkValue: 'N',
        columnOrder: '1'

      }]
    }
  },
  methods: {
    addLine(index) { //添加行数
      debugger
      var newValue = {
        columnName: '',
        columnComment: '',
        primaryKeyType: '',
        columnType: 'varchar',
        columnLength: 0,
        columnPoint: 0,
        defaultNull: 'N',
        defaultValue: '',
        pkValue: 'N',
        columnOrder: index+2,

      }
      //添加新的行数
      this.tableData.push(newValue)
    },
    handleDelete(index) { //删除行数
      this.tableData.splice(index, 1)
    },
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updatePrebuild(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.$store.dispatch("tagsView/delView", this.$route);
              this.$router.go(-1);
            });
          } else {
            this.form.appTableColumnRecordList = this.tableData;
            addPrebuild(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.$store.dispatch("tagsView/delView", this.$route);
              this.$router.go(-1);
            });
          }
        }
      });
    },
    /** 关闭按钮 */
    close() {
      this.$store.dispatch("tagsView/delView", this.$route);
      // this.$store.dispatch('delVisitedViews', this.$route);
      this.$router.go(-1);
    }
  }

}
</script>

<style scoped>

</style>

===============编辑============== 

<template>
  <el-form label-width="100px" :model="form" ref="form" >
    <el-row>
      <el-col :span="5">
        <el-form-item label="表名称" prop="tableName" label-width="120px" style="margin-top:20px">
          <el-input v-model="form.tableName" placeholder="请输入表名称" style="width:240px"/>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="表中文名称" prop="tableComment" label-width="120px" style="margin-top:20px">
          <el-input v-model="form.tableComment" placeholder="请输入表中文名称" style="width:240px"/>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="系统编码" prop="sysNo" label-width="120px" style="margin-top:20px">
          <template>
            <el-select v-model="form.sysNo" style="width:240px">
              <el-option label="利率报备" value="SYS004" />
              <el-option label="east" value="SYS002" />
            </el-select>
          </template>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="表类型" prop="tableType" label-width="120px" style="margin-top:20px">
          <template>
            <el-select v-model="form.tableType" style="width:240px">
              <el-option label="状态表" value="status" />
              <el-option label="记录表" value="record" />
            </el-select>
          </template>
        </el-form-item>
      </el-col>
    </el-row>
  <el-table
    :data="tableData" row-key="columnId"
    style="width: 100%"
  >
    <el-table-column
      label="字段列名"
      prop="columnName"
      :show-overflow-tooltip="true"
      min-width="70%"
      align="center"
    >
      <template slot-scope="scope">
        <el-input v-model="scope.row.columnName"></el-input>
      </template>
    </el-table-column>
    <el-table-column
      label="字段描述"
      prop="columnComment"
      min-width="70%"
      :show-overflow-tooltip="true"
      align="center"
    >
      <template slot-scope="scope">
        <el-input v-model="scope.row.columnComment"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="数据类型" min-width="50%" align="center">
      <template slot-scope="scope">
        <el-select v-model="scope.row.columnType">
          <el-option label="varchar" value="varchar" />
          <el-option label="char" value="char" />
          <el-option label="int" value="int" />
          <el-option label="bigint" value="bigint" />
          <el-option label="double" value="double" />
          <el-option label="datetime" value="datetime" />
          <el-option label="timestamp" value="timestamp" />
          <el-option label="Integer" value="Integer" />
          <el-option label="decimal" value="decimal" />
          <el-option label="date" value="date" />
        </el-select>
      </template>
    </el-table-column>
      <el-table-column label="数据长度" min-width="35%" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.columnLength" type="number"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="小数点" min-width="35%" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.columnPoint" type="number"></el-input>
        </template>
      </el-table-column>
    <el-table-column label="能否为空" min-width="50%" align="center">
      <template slot-scope="scope">
        <el-select v-model="scope.row.defaultNull">
          <el-option label="是" value="Y" />
          <el-option label="否" value="N" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="默认值" min-width="50%" align="center">
      <template slot-scope="scope">
        <el-input v-model="scope.row.defaultValue" ></el-input>
      </template>
    </el-table-column>
    <el-table-column label="是否主键" min-width="50%" align="center">
      <template slot-scope="scope">
        <el-select v-model="scope.row.pkValue">
          <el-option label="是" value="Y" />
          <el-option label="否" value="N" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column
      label="主键类型"
      prop="primaryKeyType"
      min-width="50%"
      align="center"
    >
      <template slot-scope="scope">
        <el-input v-model="scope.row.primaryKeyType"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="排序" min-width="50%" align="center">
      <template slot-scope="scope">
        <el-input v-model="scope.row.columnOrder" type="number"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" min-width="50%">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="addLine(scope.$index, scope.row)"
        >增加
        </el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          v-if="scope.$index !=0"
        >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
      <el-button type="primary" @click="save()">提交</el-button>
      <el-button @click="close()">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>


import { addPrebuild, listPrebuild,getPrebuild } from '@/api/dcm/prebuild'
import { listPrebuildColumn } from '@/api/dcm/prebuildColumn'


export default {
  data() {
    return {
      form:{
        tableName:"",
        tableComment:"",
        appTableColumnRecordList:[]
      },
      // 表列信息
      tableData: [{
        columnName: '',
        columnComment: '',
        primaryKeyType: '',
        columnType: 'varchar',
        columnLength: 0,
        columnPoint: 0,
        defaultNull: 'N',
        defaultValue: '',
        pkValue: 'N',
        columnOrder: '1'
      }],

    }
  },
  created() {
    const tableId = this.$route.params && this.$route.params.id;
    if (tableId) {
      // 获取主表详细信息
      getPrebuild(tableId).then(res => {
        this.form = res.data
      });
      //获取字段列信息
      listPrebuildColumn({tableId:tableId}).then(response => {
        this.tableData = response.rows;
      });
    }
  },
  methods: {
    addLine(index) { //添加行数
      var newValue = {
        columnName: '',
        columnComment: '',
        primaryKeyType: '',
        columnType: 'varchar',
        columnLength: 0,
        columnPoint: 0,
        defaultNull: 'N',
        defaultValue: '',
        pkValue: 'N',
        columnOrder: index+2

      }
      //添加新的行数
      this.tableData.push(newValue)
    },
    handleDelete(index) { //删除行数
      this.tableData.splice(index, 1)
    },
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.appTableColumnRecordList = this.tableData;
          if (this.form.id != null) {
            addPrebuild(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.$store.dispatch("tagsView/delView", this.$route);
              this.$router.go(-1);
            });
          } else {
            addPrebuild(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.$store.dispatch("tagsView/delView", this.$route);
              this.$router.go(-1);
            });
          }
        }
      });
    },
    /** 关闭按钮 */
    close() {
      this.$store.dispatch("tagsView/delView", this.$route);
      // this.$store.dispatch('delVisitedViews', this.$route);
      this.$router.go(-1);
    }
  }

}
</script>

<style scoped>

</style>