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 相关文章推荐
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
javascript window对象属性整理
Oct 24 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
在node中如何使用 ES6
Apr 22 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
vue中echarts引入中国地图的案例
Jul 28 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抓取https的内容的代码
2010/04/06 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
用于table内容排序
2006/07/21 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
python进阶教程之异常处理
2014/08/30 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
Python实现ATM系统
2020/02/17 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
函授自我鉴定
2013/11/06 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
mysql创建存储过程及函数详解
2021/12/04 MySQL