vue添加动态表格

一、应用场景

动态添加指定行数数据

<template>
  <el-dialog :title="!dataForm.activityId ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
      </el-form-item>  
      <el-form-item label="活动规则">
        <el-table :data="tableData" border @cell-dblclick="handle" style="width: 100%">
          <el-table-column prop="awardName" label="抽奖等级名" width="150">
            <template slot-scope="scope">
                <el-input v-model="scope.row.awardName"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="awardLevel" label="中奖等级比例碎片（总和不能超过100）" width="120">
            <template slot-scope="scope">
              <div>
                <el-input v-model="scope.row.awardLevel"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="awardProbability" label="中奖概率（总和不能超过100）" width="120">
            <template slot-scope="scope">
              <div>
                <el-input v-model="scope.row.awardProbability"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="awardPeople" label="中奖总人数" width="120">
            <template slot-scope="scope">
              <div>
                <el-input v-model="scope.row.awardPeople"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fragmentNum" label="碎片数量" width="120">
            <template slot-scope="scope">
              <div>
                <el-input v-model="scope.row.fragmentNum"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="按钮">
            <template slot-scope="scope">
              <el-button @click="addTable" type="text" size="small">添加</el-button>
              <el-button @click="deleteClick(scope.$index, scope.row)" type="text" size="small">删除</el-button>
          </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

export default {
  data () {
    return {
      tableData: [{
        activityDetailId: 1,
        awardName: '一等奖',
        awardLevel: '1',
        awardProbability: '0.1',
        awardPeople: '1',
        fragmentNum: '300000'
      }, {
        activityDetailId: 2,
        awardName: '二等奖',
        awardLevel: '10',
        awardProbability: '0.2',
        awardPeople: '2',
        fragmentNum: '200000'
      }, {
        activityDetailId: 3,
        awardName: '三等奖',
        awardLevel: '20',
        awardProbability: '0.3',
        awardPeople: '5',
        fragmentNum: '100000'
      }, {
        activityDetailId: 4,
        awardName: '四等奖',
        awardLevel: '50',
        awardProbability: '0.4',
        awardPeople: '10',
        fragmentNum: '50000'
      }],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      dataRule: {
      }
    }
  },
  methods: {
    addTable () {
      let dd = {
        activityDetailId: null,
        awardName: '',
        awardLevel: '',
        awardProbability: '',
        awardPeople: '',
        fragmentNum: ''
      }
      this.tableData.push(dd)
    },
    deleteClick (index, rows) {
      console.log('row', rows)
      console.log(this.tableData)
      this.tableData.splice(index, 1)
      console.log(this.tableData)
    }
  }
}