『el-form 和 el-table 实现表单校验』

一、基本使用

<el-form
  ref="form"
  :model="form"
  :rules="form.rules"
  :inline="true"
  label-width="108px"
>
  <el-table :data="form.data" style="width: 100%" border>
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column align="center">
      
      <template slot="header">
        <span style="color: #2d65dc">成员名称span>
        <i style="color: #f56c6c">*i>
      template>
      
      <template slot-scope="scope">
        <el-form-item
          :prop="`data.${scope.$index}.name`"
          :rules="form.rules.name"
        >
          <el-input
            v-model="scope.row.name"
            type="text"
            autocomplete="off"
          />
        el-form-item>
      template>
    el-table-column>
  el-table>
el-form>

export default {
  data() {
    return {
      form: {
        data: [
          {
            name: ''
          }
        ],
        rules: {
          name: [
            { required: true, message: '请输入成员名称', trigger: 'blur' }
          ]
        }
      }
    }
  },
}

• :model="form" 给表单绑定数据，form 是传入表单的数据对象
• form ：
  • 属性 data （可按需求命名）为表单内嵌套的表格的显示数据，数组类型；
  • 属性 rules ，为表单绑定的验证规则。
• el-table： 采用自定义列模板，可自定义表头， el-form： 表单项绑定对应的字段名和校验规则
• :prop="'data.' + scope.$index + '.name'" 绑定传入Form 组件的 model 中对应的字段 name
• :rules="form.rules.name" 绑定表单验证规则

---

二、应用实例

点击添加的时候，动态增加表格的行数，点击删除的时候，删除表格的行数据：

<template>
  <div class="app-container">
    <el-button @click="showDialog = true">点击显示弹框el-button>

    
    <el-dialog
      title="添加数据"
      :visible.sync="showDialog"
      width="415px"
      top="23vh"
    >
      <el-button @click="addItem">添加el-button>
      <el-button @click="delItem">删除el-button>
      <el-button @click="resetForm('form')">重置el-button>
      <br><br>

      <el-form
        ref="form"
        :model="form"
        :rules="form.rules"
        :inline="true"
        label-width="108px"
      >
        <el-table
          :data="form.data"
          style="width: 100%"
          border
          @selection-change="changeSelection"
        >
          <el-table-column type="selection" width="55" align="center" />

          <el-table-column align="center">
            <template slot="header">
              <span style="color: #2d65dc">成员名称span>
              <i style="color: #f56c6c">*i>
            template>
            <template slot-scope="scope">
              <el-form-item
                :prop="`data.${scope.$index}.name`"
                :rules="form.rules.name"
              >
                <el-input
                  v-model="scope.row.name"
                  type="text"
                  autocomplete="off"
                />
              el-form-item>
            template>
          el-table-column>
        el-table>
      el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelForm">取 消el-button>
        <el-button type="primary" @click="submitForm">确定el-button>
      span>
    el-dialog>
  div>
template>

export default {
  data() {
    return {
      showDialog: false,
      form: {
        data: [
          {
            name: '',
            id: 1 // 作为标识，用于删除
          }
        ],
        rules: {
          name: [{ required: true, message: '请输入成员名称', trigger: 'blur' }]
        }
      },
      selectData: [], // 选中的数据
      saveData: { jsonData: '' } // 过滤后的保存数据
    }
  },
  methods: {
    changeSelection(val) {
      this.selectData = val
    },
    cancelForm() {
      this.showDialog = false
      this.$set(this.form, 'data', [])
    },
    submitForm() {
      if (this.selectData.length > 0) {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            const result = []
            this.selectData.map((val) => {
              this.$delete(val, 'id')
              result.push(val)
            })
            // 将删除id属性后的数组存起来
            this.saveData.jsonData = result.length ? JSON.stringify(result) : ''
            this.showDialog = false
          } else {
            return false
          }
        })
      } else {
        this.$message.warning('请选择要保存的数据')
      }
    },
    addItem() {
      this.form.data.push({ name: '', id: 'T' + this.RndNum(6) })
    },
    delItem() {
      if (this.selectData.length > 0) {
        const arr = []
        const ids = this.selectData.map((val) => val.id)
        this.form.data.forEach((item) => {
          if (!ids.includes(item.id)) {
            arr.push(item)
          }
        })
        this.form.data = arr
      } else {
        this.$message.warning('请选择要删除的数据')
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    RndNum(n) {
      let rdmNum = ''
      for (let i = 0; i < n; i++) {
        rdmNum += Math.floor(Math.random() * 10) // [0,10)的整数
      }
      return rdmNum
    }
  }
}