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 相关文章推荐
模仿百度三维地图的js数据分享
May 12 Javascript
jquery map方法使用示例
Apr 23 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
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
制作美丽的拉花
2021/03/03 冲泡冲煮
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
JS 时间显示效果代码
2009/08/23 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
javascript整除实现代码
2010/11/23 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫