Ant-Design-Vue中，a-form-model嵌套table，并且支持动态添加输入框还支持表单校验

���终效果如下图，没填的会报空，填了的则正常

弹窗代码如下（直接复制肯定跑不了，自己设计一个按钮添加点击事件改变dialogAddVisible来显示）

                                                                                                                                                                            {{ item.type }}                                                                                      删除                                                          添加行              

部分使用到的data或者方法如下，拷贝进去可能不能运行，主要是分享一下思路。

每需要添加一行就往table的datasource里添加一个空数据站位字，使得表格多出一行，而重点是如何准确的获取每一行的数据并且监听和校验呢？

我设计的form叫addForm，里面的word和type是个数组，专门存对应的数据。在a-form-model里使用：form=“addForm”。重点来了，a-form-model-item的prop属性，这个我观察了官网的例子，发现，prop需要赋一个字符串，字符串的内容是form的属性，在这里，form的属性则是word和type这两个数组，又因为我有许多输入框，我用的是数组来对应那些输入框。所以prop应该是动态的，（每个输入框的prop不一样嘛），则写出了:prop="`word[${index}]`"。让prop等于word[0]/word[1]/word[2]这样。而input中的v-model也是对应着那个数据。从而达到了校验表单的效果

export default {  name: 'Sensitive',  data() {    return {      template: {        key: 1,        word: '',        type: '',        opreate: '',      },      dataSource: [],      dialogAddVisible: false,      tempItem: {        word: '',        type: '',      },      addForm: {        word: [],        typee: [],      },      rules: {        word: [{ required: true, message: '敏感词不能为空', trigger: 'blur' }],        typee: [{ required: true, message: '请填写类型', trigger: 'blur' }],      },      dialogEditVisible: false,      showColumns: [        {          title: '敏感词',          dataIndex: 'word',          width: 'auto',          key: 'name',          fontSize: 14,        },        {          title: '分类',          dataIndex: 'type',          key: 'age',          width: 320,          filters: [            { text: '谩骂骚扰', value: '谩骂骚扰' },            { text: '暴力言论', value: '暴力言论' },            { text: '政治', value: '政治' },            { text: '贩卖野生动物', value: '贩卖野生动物' },            { text: '色情挑逗', value: '色情挑逗' },            { text: '色情传播', value: '色情传播' },            { text: '广告引流', value: '广告引流' },          ],          onFilter: (value, record) => {            // 这里要设置一下分页器的总数            return record.type == value          },        },        {          title: '操作',          dataIndex: 'opreate',          key: 'opreate',          ellipsis: true,          width: 112,          scopedSlots: { customRender: 'opreate' },        },      ],      addColumns: [        {          title: '数量',          dataIndex: 'key',          width: 80,          key: 'key',          fontSize: 14,        },        {          title: '敏感词',          dataIndex: 'word',          width: 320,          key: 'name',          fontSize: 14,          scopedSlots: { customRender: 'word' },        },        {          title: '分类',          dataIndex: 'type',          key: 'age',          width: 320,          scopedSlots: { customRender: 'type' },        },        {          title: '操作',          dataIndex: 'opreate',          key: 'opreate',          ellipsis: true,          width: 80,          scopedSlots: { customRender: 'opreate' },        },      ],      typeOption: [        { type: '谩骂骚扰', id: 1 },        { type: '暴力言论', id: 2 },        { type: '政治', id: 3 },        { type: '贩卖野生动物', id: 4 },        { type: '色情挑逗', id: 5 },        { type: '色情传播', id: 6 },        { type: '广告引流', id: 7 },      ],      dialogPvVisible: false,    }  },  created() {    // 深拷贝一份进去    this.dataSource.push(JSON.parse(JSON.stringify(this.template)))  },  methods: {    // 判断删除状态，如果只有一项则不可操作，反之亦然    judgeAvailable() {      console.log('asd')      if (this.dataSource.length == 1) {        let deleteBTN = document.getElementsByClassName('removeRowBTN')[0]        deleteBTN.style.cursor = 'not-allowed'        deleteBTN.style.color = 'grey'        deleteBTN.style.pointerEvents = 'none'      } else {        var x = document.getElementsByClassName('removeRowBTN')        var i        for (i = 0; i  {        this.judgeAvailable()      })    },    addRow() {      let obj = JSON.parse(JSON.stringify(this.template))      obj.key = this.dataSource[this.dataSource.length - 1].key + 1      this.dataSource.push(obj)      console.log(this.addForm)      this.judgeAvailable()    },    // 新增敏感词的校验    onSubmit() {      this.$refs.addForm.validate((valid) => {        if (valid) {          console.log(this.dataSource)          console.log(this.addForm)          alert('submit!')        } else {          console.log('error submit!!')          console.log(this.dataSource)          console.log(this.addForm)          console.log(typeof this.addForm.typee[0])          return false        }      })    },    showEditWordDialog(text, record) {      this.dialogEditVisible = true      this.$nextTick(() => {        this.editForm.setFieldsValue({ editSensitiveWord: record.word })        this.editForm.setFieldsValue({ editType: record.type })      })    },    // 新增敏感词    handleAddWord() {},    showEditDialog(text, record) {      console.log(text, record)    },    handleDeleteAdd(text, record) {      const h = this.$createElement      console.log(text, record)      this.$confirm({        title: `你确认要删除【${record.word}】敏感词吗`,        okText: '确认',        cancelText: '取消',        centered: true,        icon: () =>          h('img', {            attrs: {              src: require('../../assets/images/alert.png'),            },            style: {              'vertical-align': 'baseline',              display: 'inline',              float: 'left',              'margin-right': '17px',            },          }),        onOk: () => {          console.log('确认删除新增项')          this.dataSource.splice(record.key - 1, 1)          if (this.dataSource.length == 1) {            // 设置为不可用            this.judgeAvailable()            return          }          // 这里发送删除的请求，不过需要key，等后端的数据吧        },      })    },  },