[hungry dynamic table]

<template>
  <div>
    <el-button @click="add"> Add a new line </el-button>
    <el-button @click="save"> preservation </el-button>
    <el-table :data="tableData" style="width: 100%">

      <el-table-column prop="compty" label=" date " width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.compty" placeholder=" Please enter the content "></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="brand" label=" full name " width="180">
        <template slot-scope="scope">
          <el-select v-model="scope.row.brand" placeholder=" Please select ">
            <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=" date " width="180">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small">
             remove 
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
export default {
  data() {
    return {
      compty: null,
      tableData: [
      //   {
      //   date: '2016-05-02',
      //   name: ' X.h. ',
      //   address: ' Jinshajiang road, putuo district, Shanghai  1518  get '
      // }, {
      //   date: '2016-05-04',
      //   name: ' X.h. ',
      //   address: ' Jinshajiang road, putuo district, Shanghai  1517  get '
      // }, {
      //   date: '2016-05-01',
      //   name: ' X.h. ',
      //   address: ' Jinshajiang road, putuo district, Shanghai  1519  get '
      // }, {
      //   date: '2016-05-03',
      //   name: ' X.h. ',
      //   address: ' Jinshajiang road, putuo district, Shanghai  1516  get '
      // }
      ],

      options: [{
        value: ' Options 1',
        label: ' Golden cake '
      }, {
        value: ' Options 2',
        label: ' Double skin milk '
      }, {
        value: ' Options 3',
        label: ' Oyster omelet '
      }, {
        value: ' Options 4',
        label: ' dragon whiskers noodles '
      }, {
        value: ' Options 5',
        label: ' Beijing Roast Duck '
      }],



    }
  },
  created() {

  },
  methods: {
    add() {
      this.tableData.push({
        compty: null,
        brand: null,
      })
    },
    save() {
      console.log(' Saved data ',this.tableData);
    },

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




  },
}
</script>