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高级程序设计 阅读笔记(二十) js错误处理
Aug 14 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
老生常谈Python序列化和反序列化
2017/06/28 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
Python随机数函数代码实例解析
2020/02/09 Python
SQL数据库笔试题
2016/03/08 面试题
医学院学生的自我评价分享
2013/11/19 职场文书
创先争优活动方案
2014/02/12 职场文书
岗位职责风险点
2014/03/12 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
关于学习的决心书
2015/02/05 职场文书
客户付款通知书
2015/04/23 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
《风筝》教学反思
2016/02/23 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
Go timer如何调度
2021/06/09 Golang