<!--  -->
<template>
  <div>
    <el-table :data="tableData" style="width: 70%" :size="defaultFormItemSize">
      <el-table-column type="index" width="50" >
      </el-table-column>
      <el-table-column prop="modelInformation" label="模型信息">
        <template slot-scope="scope">
          <el-cascader :size="defaultFormItemSize" v-model="scope.row.modelInformation" :options="options" ></el-cascader>
        </template>
      </el-table-column>
      <el-table-column prop="modelVersionDescription" label="模型版本描述">
      </el-table-column>
      <el-table-column prop="serviceLabel" label="业务标签">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deleteRow(scope.$index)" :size="defaultFormItemSize" type="text">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button class="add"  @click="add" :disabled="this.tableData.length === 5" icon="el-icon-plus" :size="defaultFormItemSize" >新增</el-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tableData: [{
        modelInformation: '',
        modelVersionDescription: '-',
        serviceLabel: '-'
      }]
    };
  },

  components: {},

  computed: {},

  mounted () { },

  methods: {
    add () {
      if (this.tableData.length === 5) return
      this.tableData.push({
        modelInformation: '',
        modelVersionDescription: '-',
        serviceLabel: '-'
      })
    },
    deleteRow (index) {
      this.tableData.splice(index, 1);
    }
  }
}

</script>
<style scoped>
.add{
    margin-top: 20px;
}
</style>
