vue+iView Table Form 表格动态添加输入下拉+校验

<template>
  <div class="wrap">
    <div class="table">
      <Form ref="formValidate" :model="formValidate">
        <Table border :columns="clerkColumns" :data="formValidate.tableData" ref="table">
          <template slot="newModuleName" slot-scope="{ index, row }">
            <Form-item
              :prop="'tableData.' + index + '.newModuleName'"
              :rules="{required: true, message: '请选择模块名', trigger: 'change'}"
            >
              <Select v-model="formValidate.tableData[index].newModuleName" size="small" transfer>
                <Option value="1">听力</Option>
                <Option value="2">阅读</Option>
                <Option value="3">书写</Option>
              </Select>
            </Form-item>
          </template>
          <template slot="newModuleScores" slot-scope="{ index, row }">
            <Form-item
              :prop="'tableData.' + index + '.newModuleScores'"
              :rules="{type: 'number', required: true, message: '请输入模块总分数', trigger: 'change'}"
            >
              <InputNumber
                :max="300"
                :min="1"
                v-model="formValidate.tableData[index].newModuleScores"
                placeholder="请输入模块总分数"
                size="small"
                style="width: 100%"
              ></InputNumber>
            </Form-item>
          </template>
          <template slot="newSerial" slot-scope="{ index, row }">
            <Form-item
              :prop="'tableData.' + index + '.newSerial'"
              :rules="{required: true, message: '请选择部分序号', trigger: 'change'}"
            >
              <Select v-model="formValidate.tableData[index].newSerial" size="small" transfer>
                <Option value="1">第一部分</Option>
                <Option value="2">第二部分</Option>
                <Option value="3">第三部分</Option>
                <Option value="4">第四部分</Option>
              </Select>
            </Form-item>
          </template>
          <template slot="newQuestion" slot-scope="{ index, row }">
            <Form-item
              :prop="'tableData.' + index + '.newQuestion'"
              :rules="{required: true, message: '请选择题型', trigger: 'change'}"
            >
              <Select v-model="formValidate.tableData[index].newQuestion" size="small" transfer>
                <Option value="1">判断对错</Option>
                <Option value="2">选出正确答案</Option>
                <Option value="3">选词填空</Option>
                <Option value="4">排列顺序</Option>
                <Option value="5">完成句子</Option>
              </Select>
            </Form-item>
          </template>
          <template slot="newTopicNum" slot-scope="{ index, row }">
            <Form-item
              :prop="'tableData.' + index + '.newTopicNum'"
              :rules="{type: 'number', required: true, message: '请输入部分包含题数', trigger: 'change'}"
            >
              <InputNumber
                :max="50"
                :min="1"
                v-model="formValidate.tableData[index].newTopicNum"
                placeholder="请输入部分包含题数"
                size="small"
                style="width: 100%"
              ></InputNumber>
            </Form-item>
          </template>
          <template slot="newDuration" slot-scope="{ index, row }">
            <Form-item
              :prop="'tableData.' + index + '.newDuration'"
              :rules="{type: 'number', required: true, message: '请输入时长', trigger: 'change'}"
            >
              <InputNumber
                :max="30"
                :min="1"
                v-model="formValidate.tableData[index].newDuration"
                placeholder="请输入时长"
                size="small"
                style="width: 100%"
              ></InputNumber>
            </Form-item>
          </template>
          <template slot="operation" slot-scope="{index, row}">
            <Poptip
              v-if="formValidate.tableData.length -1 === index"
              confirm
              transfer
              title="是否删除当前行?"
              @on-ok="handleDel(index, row)"
              @on-cancel="handleDelCancel"
            >
              <Icon type="md-trash" size="18" />
            </Poptip>
          </template>
        </Table>
      </Form>
    </div>
    <Button type="dashed" long style="margin-top: 10px" @click="handleAddModule">+添加模块</Button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clerkColumns: [
        {
          slot: 'newModuleName',
          title: '模块名',
          minWidth: 10,
          align: 'center'
        },
        {
          slot: 'newModuleScores',
          title: '模块总分数',
          minWidth: 10,
          align: 'center'
        },
        {
          slot: 'newSerial',
          title: '部分序号',
          minWidth: 10,
          align: 'center'
        },
        {
          slot: 'newQuestion',
          title: '部分序号',
          minWidth: 10,
          align: 'center'
        },
        {
          slot: 'newTopicNum',
          title: '部分包含题数',
          minWidth: 10,
          align: 'center'
        },
        {
          slot: 'newDuration',
          title: '时长',
          minWidth: 10,
          align: 'center'
        },
        {
          slot: 'operation',
          title: '操作',
          minWidth: 10,
          align: 'center'
        }
      ],
      formValidate: {
        tableData: [
          {
            newModuleName: '1',
            newModuleScores: 300,
            newSerial: '1',
            newQuestion: '1',
            newTopicNum: 50,
            newDuration: 30
          },
          {
            newModuleName: '',
            newModuleScores: null,
            newSerial: '',
            newQuestion: '',
            newTopicNum: null,
            newDuration: null
          }
        ]
      },
      agentTimes: [
        { value: 1, label: '123' }
      ]
    }
  },
  mounted() {

  },
  methods: {
    // 添加新一行模块信息
    handleAddModule() {
      console.log(this.formValidate)
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.formValidate.tableData.push({
            newModuleName: '',
            newModuleScores: null,
            newSerial: '',
            newQuestion: '',
            newTopicNum: null,
            newDuration: null
          })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    // 删除当前模块行
    handleDel(index, row) {
      this.formValidate.tableData.splice(index, 1);
    },
    handleDelCancel() {
      this.$Message.info('取消删除')
    }
  }
}
</script>