动态生成的表格中带有input输入框的验证

页面html

 <el-button @click="addLine">添加行数</el-button>
    <el-button @click="save('formDom')">baocun</el-button>
    <el-form
      ref="formDom"
      :rules="formData.rules"
      :model="formData"
      class="demo-ruleForm"
    >
      <el-table :data="formData.tableData" style="width: 100%">
        <el-table-column prop="bookname" label="书名">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.bookname'"
              :rules="formData.rules.name"
            >
              <el-input
                v-model="scope.row.bookname"
                placeholder="书名"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="bookvolume" label="册数">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.bookvolume'"
              :rules="formData.rules.volume1"
            >
              <el-input
                v-model.number="scope.row.bookvolume"
                placeholder="册数"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

js

export default {
  name: 'ItemList',
  data() {
    return {
      formData: {
        rules: {
          name: {
            type: 'string',
            required: true,
            message: '必填字段',
            trigger: 'blur',
          },
          volume1: {
            type: 'number',
            required: true,
            message: '册数必须为数字值',
            trigger: 'change',
          },
          data1: {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change',
          },
        },
        tableData: [
          {
            bookname: '',
            bookvolume: '',
          },
        ],
      },
    }
  },
  created() {},
  methods: {
    addLine() {
      //添加行数
      var newValue = {
        bookname: '',
        bookvolume: '',
      }
      //添加新的行数
      this.formData.tableData.push(newValue)
    },
    save(formName) {
      //保存
      this.$refs[formName].validate((valid, model) => {
        console.log(valid)
        console.log(JSON.stringify(model))
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}