ant-design-vue 实现表格内部字段验证功能


Posted in Javascript onDecember 16, 2019

表格内 column 可输入的需求还是很常见的,尤其有一些业务场景就是表单内部有一个表格,然后表格的某些列是个进行输入的,就像下面这样

  • 下单数量 内容不能为空
  • 下单数量 必须输入正整数

ant-design-vue 实现表格内部字段验证功能

翻阅 ant-design-vue 官网并没有发现说表单内表格字段验证的方案,但是有一个 自行处理表单数据 的介绍

ant-design-vue 实现表格内部字段验证功能

那我们是不是可以参考这个方案去实现咱自己的业务需求呢,下面就开始说一下实现方案

<a-table
 :columns="columns"
 bordered
 :rowKey="col => col.id"
 :dataSource="tableData"
>

 <a-form-item 
  :label-col="{
   xs: { span: 0 },
   sm: { span: 0 },
  }"
  :wrapper-col="{
   xs: { span: 24 },
   sm: { span: 24 },
  }"
  :validate-status="getFildStatus(record.id).validateStatus"
  :help="getFildStatus(record.id).errorMsg"
  slot="goodModelCount" 
  slot-scope="text, record">
  <a-input
   style="width: 100%"
   :min="1"
   v-model="text.goodModelCount"
   @change="handleChange(text.goodModelCount, record.id)"
  />
 </a-form-item>

 <div slot="action" slot-scope="text, record">
  <a href="javascript:;" rel="external nofollow" ><a-icon type="delete" /></a>
 </div>
</a-table>

<script>
const columns = [
 { title: '商品名称', dataIndex: 'id', align: 'center' },
 { title: '商品型号', dataIndex: 'account', align: 'center' },
 { title: '型号价格', dataIndex: 'area', align: 'center' },
 { title: '下单数量', key: 'goodModelCount', align: 'center', width: '200px', scopedSlots: { customRender: 'goodModelCount' }, align: 'center', },
 { title: '操作', scopedSlots: { customRender: 'action' }, width: '150px', align: 'center',}
]

function validatePrimeNumber(number) {
 if (/^[1-9]\d*|0$/.test(number)) {
  return {
   validateStatus: 'success',
   errorMsg: '',
  };
 }
 return {
  validateStatus: 'error',
  errorMsg: '下单数量不能为空',
 };
}
export default {
 name: 'order-dialog',
 data() {
  return {
   visible: true,
   labelCol: {
    xs: { span: 24 },
    sm: { span: 7 },
   },
   wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
   },
   form: this.$form.createForm(this),
   validatorRules: {
    consigneeName: {
     rules: [
      { required: true, message: '请输入收货人姓名' }
     ]
    },
    consigneePhone: {
     rules: [
      { required: true, message: '请输入收货人联系电话' }
     ]
    },
    addresseeAddressDetail: {
     rules: [
      { required: true, message: '请输入收货地址详情' }
     ]
    }
   },
   columns: columns,
   tableData: [{ id: 1, account: 123, area: 123, goodModelCount: 3434}, { id: 2, account: 123, area: 123, goodModelCount: 111}],
   goodModelCountData: []
  }
 },
 methods: {
  getFildStatus(id) {
   const data = this.goodModelCountData.filter(item => id === item.id)[0]
   if (data) {
    return data
   } else {
    return {
     errorMsg: '',
     validateStatus: 'success'
    }
   }
  },

  handleChange(value, id) {
   const newData = [...this.tableData];
   const target = newData.filter(item => item.id === id)[0]
   if (target) {
    const { errorMsg, validateStatus } = validatePrimeNumber(value)
    let flag = true
    this.goodModelCountData.forEach(val => {
     if (val.id === id) {
      flag = false
      val.errorMsg = errorMsg,
      val.validateStatus = validateStatus
     }
    })

    if (flag) {
     this.goodModelCountData.push({
      id,
      errorMsg,
      validateStatus
     })
    }
    target.goodModelCount = value
    this.tableData = newData
   }
  },
  handleOk() {
   this.visible = false
  }
 }
}
</script>

重点注意两个属性:

  • validate-status 校验状态,可选 ‘success', ‘warning', ‘error', ‘validating'
  • help 设置校验文案

在 vue 里面是允许我们在属性里面以 函数 的形式返回属性的,所以我们可以把验证规则放到函数里里面 validatePrimeNumber (函数名字最好还是语义化明确一些,我这边直接复制的官方文档上的)

需要进行验证的字段(需要在 a-table 标签内部)

<a-form-item 
 :label-col="{
  xs: { span: 0 },
  sm: { span: 0 },
 }"
 :wrapper-col="{
  xs: { span: 24 },
  sm: { span: 24 },
 }"
 :validate-status="getFildStatus(record.id).validateStatus"
 :help="getFildStatus(record.id).errorMsg"
 slot="goodModelCount" 
 slot-scope="text, record">
 <a-input
  style="width: 100%"
  :min="1"
  v-model="text.goodModelCount"
  @change="handleChange(text.goodModelCount, record.id)"
 />
</a-form-item>

当我们输入框进行输入的时候我们就会出发 handleChange 方法,在方法里里面我们去进行输入内容的验证,然后根据id从 getFildStatus 找到当前对象,然后进行验证。

如果列表内有多列需要进行验证,那么就需要主要这个数据格式怎么定了了,根据实际需求进行参考

总结

以上所述是小编给大家介绍的ant-design-vue 实现表格内部字段验证功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
js实现二级导航功能
Mar 03 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 Javascript
js DOM的事件常见操作实例详解
Dec 16 #Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 #Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 #Javascript
javascript自定义右键菜单插件
Dec 16 #Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 #Javascript
js实现数字滚动特效
Dec 16 #Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 #Javascript
You might like
PHP身份证校验码计算方法
2016/08/10 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
python实现的阳历转阴历(农历)算法
2014/04/25 Python
在Python中使用HTML模版的教程
2015/04/29 Python
浅析Python基础-流程控制
2016/03/18 Python
python用户管理系统
2018/03/13 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
Django接收自定义http header过程详解
2019/08/23 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
Python数据正态性检验实现过程
2020/04/18 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
Java程序员综合测试题
2014/04/25 面试题
英文版银行求职信
2013/10/09 职场文书
会计专业的自荐信
2013/12/12 职场文书
酒店员工检讨书
2014/02/18 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
西柏坡观后感
2015/06/08 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
mysql序号rownum行号实现方式
2022/12/24 MySQL