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 相关文章推荐
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
解决layer.open后laydate失效的问题
Sep 06 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
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
在视频前插入广告
2006/11/20 Javascript
jQuery 操作XML入门
2008/12/25 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
python去掉字符串中重复字符的方法
2014/02/27 Python
介绍Python的@property装饰器的用法
2015/04/28 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
详解python中sort排序使用
2019/03/23 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
python tornado修改log输出方式
2019/11/18 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
销售代表求职自荐信
2013/10/01 职场文书
网络专业学生个人的自我评价
2013/12/16 职场文书
离职证明格式样本
2015/06/12 职场文书
信息技术国培研修日志
2015/11/13 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫