vue+element 表格校验

因为element-ui中并没有这个校验，只有<el-form>的校验，在<el-table>里您可以在外侧加一个表单的标签从而进行校验

                
        <el-form
          :model="dataForm"
          :rules="dataRule"
          ref="dataForm"
          @keyup.enter.native="dataFormSubmit()"
          label-width="80px"
          :inline="true"
        >
             <el-table-column
                  prop="controlObject"
                  label="名称"
                  :render-header="renderheader"
                  width="135"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="'details.' + scope.$index + '.controlObject'"
                      :rules="dataRule.controlObject"
                    >
                      <el-input
                        style="margin-top: 22px"
                        v-model.trim="scope.row.controlObject"
                        :disabled="disabled"
                        :maxlength="10"
                        placeholder=""
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
            </el-form>

 data部分

export default {
  data () {
    const checkPhone = (rule, value, callback) => {
      const age = /^[\u2E80-\u9FFF]+$/
      if (!age.test(value)) {
        callback(new Error('请填写中文'))
      } else {
        callback()
      }
    }
    return {
      details: {
        controlObject: ''      
                },
    
      dataRule: {
        controlObject: [
          { validator: checkPhone, trigger: 'blur' },
          { required: true, message: '电话不能为空', trigger: 'blur' }
        ]
      }
    }
  },

这里dataRule里的message的提示信息：‘电话不能为空’，这里面的内容无所谓写什么，因为提示信息会写校验方法里的提示信息。

还有一点就是要注意，这个表格一定要包裹在<el-form></el-form>标签里，否则也是无法生效

扫描二维码关注公众号，回复： 13225827 查看本文章