<template>

    <div class="page-layout rataMdel">

      <el-button type="primary" @click="addItem">+添加一行</el-button>

      <el-form

        :model="ruleForm"

        ref="ruleForm"

        label-width="100px"

        class="demo-ruleForm"

      >

        <el-table :data="ruleForm.tableList" style="width: 100%">

          <el-table-column prop="name">

            <!-- 变量rules -->

            <template slot-scope="scope">

              <el-form-item

                label="活动名称"

                :prop="'tableList.' + scope.$index + '.name'"

                :rules="rules.name"

              >

                <el-input v-model="scope.row.name"></el-input>

              </el-form-item>

            </template>

          </el-table-column>

          <el-table-column prop="region">

            <!-- 行内rules -->

            <template slot-scope="scope">

              <el-form-item

                label="活动区域"

                :prop="'tableList.' + scope.$index + '.region'"

                :rules="[{ required: true }]"

              >

                <el-select v-model="scope.row.region" placeholder="活动区域">

                  <el-option label="区域一" value="shanghai"></el-option>

                  <el-option label="区域二" value="beijing"></el-option>

                </el-select>

              </el-form-item>

            </template>

          </el-table-column>

        </el-table>

      </el-form>

      <div style="margin-top: 20px">

        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>

      </div>

    </div>

  </template>

  <script>

  export default {

    data() {

      return {

        ruleForm: {

          tableList: []

        },

        rules: {

          name: [

            { required: true, message: "请输入活动名称", trigger: "blur" },

            { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }

          ]

        }

      };

    },

    methods: {

      addItem() {

        this.ruleForm.tableList.push({

          name: "",

          region: ""

        });

      },

      submitForm(formName) {

        this.$refs[formName].validate((valid) => {

          if (valid) {

            alert("submit!");

          } else {

            console.log("error submit!!");

            return false;

          }

        });

      }

    }

  };

  </script>

  <!-- <style lang='scss' scoped>

  .rataMdel {

    .el-table td {

      padding: 6px 0;

    }

    .el-form-item__error {

      display: none;

    }

    .header-flex {

      display: flex;

      align-items: center;

      justify-content: space-between;

    }

    .tableTitle {

      font-size: 20px;

      margin-bottom: 30px;

    }

    .charts-box {

      width: 100%;

      display: flex;

      justify-content: center;

    }

    .tableText {

      padding: 15px;

      font-size: 15px;

      color: #333333;

    }

    .small-num {

      display: inline-block;

      width: 70px;

    }

    .small-string {

      display: inline-block;

      width: 130px;

    }

    p {

      margin: 0;

      padding: 0;

    }

    .el-form-item {

      display: inline-block;

      margin-bottom: 0px;

    }

  }

  </style> -->