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 相关文章推荐
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
动态加载js、css的实例代码
May 26 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
JS动态显示倒计时效果
Dec 12 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
一个目录遍历函数
2006/10/09 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
javascript 自定义事件初探
2009/08/21 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
资产经营总监岗位职责范文
2013/12/01 职场文书
农业开发项目建议书
2014/05/16 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
承诺函范文
2015/01/21 职场文书
入队仪式主持词
2015/07/04 职场文书
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫
SQL语句多表联合查询的方法示例
2022/04/18 MySQL