【饿了么动态表格】

<template>
  <div>
    <el-button @click="add">新增一行</el-button>
    <el-button @click="save">保存</el-button>
    <el-table :data="tableData" style="width: 100%">

      <el-table-column prop="compty" label="日期" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.compty" placeholder="请输入内容"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="brand" label="姓名" width="180">
        <template slot-scope="scope">
          <el-select v-model="scope.row.brand" placeholder="请选择">
            <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 label="日期" width="180">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
export default {
  data() {
    return {
      compty: null,
      tableData: [
      //   {
      //   date: '2016-05-02',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄'
      // }, {
      //   date: '2016-05-04',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1517 弄'
      // }, {
      //   date: '2016-05-01',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1519 弄'
      // }, {
      //   date: '2016-05-03',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1516 弄'
      // }
      ],

      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],



    }
  },
  created() {

  },
  methods: {
    add() {
      this.tableData.push({
        compty: null,
        brand: null,
      })
    },
    save() {
      console.log('保存的数据',this.tableData);
    },

    deleteRow(index,row) {
      console.log('index',index);
      console.log('row',row);
      console.log(this.tableData);
      this.tableData.splice(index,1)
    }




  },
}
</script>