Vue之功能全面的表格(六)实现带有数组输入的表单

输入表单

1、编辑DataTable.vue,在对话框中加入表单,包含除添加作者以外的所有输入框

    <!-- 对话框 -->
    <edit-dialog :show="editShow" title="编辑学习计划" @close="closeEditDialog" @save="saveTodo">
      <!-- 学习内容表单 -->
      <el-form :model="currentTodo" ref="todoEditForm">
        <el-form-item label="学习书籍" prop="name" required>
          <el-input v-model="currentTodo.name"></el-input>
        </el-form-item>

        <el-form-item label="书籍内容" prop="content" required>
          <el-input v-model="currentTodo.content" type="textarea"></el-input>
        </el-form-item>

        <el-form-item label="完成时间" prop="completeDate" required>
          <el-date-picker v-model="currentTodo.completeDate" type="date"></el-date-picker>
        </el-form-item>
      </el-form>
    </edit-dialog>

2、新增属性currentTodo

  data () {
    return {
      data: [],
      searchStr: '',
      filterType: '',
      filterDates: null,
      statuses: ['未开始', '进行中', '搁置', '完成'],
      statusColors: ['info', 'primary', 'warning', 'success'],
      sortProp: '',
      sortOrder: '',
      currentPage: 1,
      currentPageSize: 3,
      editShow: false,
      currentTodo: {}
    }
  },

3、修改保存数据和关闭对话框的方法,在符合校验规则时才提交表单,根据currentTodo是否有_id属性来决定提交新增请求还是更新请求,并且在关闭对话框时重置表单。

methods: {
    ...
    addTodo() {
        this.currentTodo = {}
        this.editShow = true
    },
    saveTodo() {
        this.$refs.todoEditForm.validate((valid) => {
            if (valid) {
                this.currentTodo._id ? this.editAjax() : this.addAjax()
            }
        });
    },
    closeEditDialog() {
        this.currentTodo = {}
        this.$refs.todoEditForm.resetFields()
        this.editShow = false
    },
    addAjax() {
        this.closeEditDialog()
    },
    editAjax() {
        this.closeEditDialog()
    }
},

4、效果如下:
在这里插入图片描述

5、目前验证提示为英文,如果想要自定义验证规则请参考:
使用Element美化网站和实现验证

添加作者

6、author属性的为数组类型,因此实现方法有所区别,这里单独列出,author属性的输入区域包括两部份,一部分由一组标签显示已经录入的作者,另一部分是输入框和按钮用于录入新作者。

<el-form-item label="书籍作者" prop="author">
  <el-tag v-for="author in currentAuthors" :key="author">{{ author }}</el-tag>
  <span @keyup.enter="addAuthor"><el-input v-model="currentAuthor"></el-input></span>
  <el-button type="primary" size="small" icon="el-icon-plus" @click="addAuthor">添加作者</el-button>
</el-form-item>

7、新增属性currentAuthorscurrentAuthor

  data () {
    return {
      data: [],
      searchStr: '',
      filterType: '',
      filterDates: null,
      statuses: ['未开始', '进行中', '搁置', '完成'],
      statusColors: ['info', 'primary', 'warning', 'success'],
      sortProp: '',
      sortOrder: '',
      currentPage: 1,
      currentPageSize: 3,
      editShow: false,
      currentTodo: {},
      currentAuthors: [],
      currentAuthor: ''
    }
  },

8、触发事件后将author加入到数组中

addAuthor () {
  this.currentAuthors.push(this.currentAuthor)
  this.currentAuthor = ''
}

9、效果如下
在这里插入图片描述

删除作者

10、为标签添加可关闭属性,并监听关闭方法

<el-tag v-for="author in currentAuthors" :key="author" closable @close="removeAuthor(author)">{{ author }}</el-tag>

11、关闭标签方法

removeAuthor (author) {
  this.currentAuthors.splice(this.currentAuthors.indexOf(author), 1)
}

12、最后在提交表单时进行赋值,并在关闭对话框时重置currentAuthorscurrentAuthor

saveTodo () {
  this.$refs.todoEditForm.validate((valid) => {
    if (valid) {
      this.currentTodo.author = this.currentAuthors
      alert(JSON.stringify(this.currentTodo))
      this.currentTodo._id ? this.editAjax() : this.addAjax()
    }
  })
},
closeEditDialog () {
  this.currentTodo = {}
  this.currentAuthors = []
  this.currentAuthor = ''
  this.$refs.todoEditForm.resetFields()
  this.editShow = false
},

13、效果如下
在这里插入图片描述

小结

本节实现了对话框中的嵌套表单,下阶段将完成添加功能与服务器间的通信

©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页