VUE 解决Modal 按钮验证

按钮验证

"T_pick" title="创建领料单" width="900" :closable="true" >
      "pickCol" :data="pickBomData" height="600" />
     
"footer" align="center">
        class="btn" size="default" type="default" @click="T_pick = false">取消
        class="btn" size="default" type="primary" @click="pickSaveAction()">确定
      
验证编辑页面
 
producebomCol: [{
            type: 'index',
            title: '序号',
            align: 'center',
            width: 80
          },
          {
            title: '顺序号',
            align: 'center',
            key: 'pro_index',
          },
          {
            title: '物料编码',
            align: 'center',
            key: 'invcode'
          },
          {
            title: '投料方式',
            align: 'center',
            key: 'feedtype_code',
          },
          {
            title: '储存位置',
            align: 'center',
            key: 'storage',
          },
          {
            title: '公差上限',
            align: 'center',
            key: 'toleranceupperlimit',
          },
          {
            title: '公差下限',
            align: 'center',
            key: 'tolerancelowerlimit',
          },
          //下拉选择
          {
            title: '单包数量',
            key: 'singleqty',
            align: 'center',
            render: (h, params) => {
              let edit
              const row = params.row
              if (this.editindex === params.index) {

                edit = h('Select', {
                    on: {
                      'onChange': (event) => {
                        params.row.singleqty = event;
                      }
                    },
                  },
                  this.volumeTypes.map(function(type) { //这个数组需要在data中定义,里面是一个个对象,每个对象里面应当包含value属性(因为要用到)
                    return h('Option', {
                      props: {
                        value: type.value
                      }
                    }, type);
                  })
                )
              } else {
                edit = h(
                  'span', {},
                  row.singleqty
                )
              }
              return h('div', [edit])
            },
          },
          //手动输入
          // {
          //   title: '单包数量',
          //   key: 'singleqty',
          //   align: 'center',
          //   render: (h, params) => {
          //     let edit
          //     const row = params.row
          //     if (this.editindex === params.index) {
          //       edit = h(
          //         'Input', {
          //           props: {
          //             value: params.row.singleqty
          //           },
          //           on: {
          //             input: event => {
          //               params.row.singleqty = Number(event)
          //             }
          //           }
          //         }
          //       )
          //     } else {
          //       edit = h(
          //         'span', {},
          //         row.singleqty
          //       )
          //     }
          //     return h('div', [edit])
          //   }
          // },
          {
            title: '需求数量',
            key: 'expected_cnt',
            align: 'center',
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            width: 200,
            render: (h, params) => {
              const arr = []

              arr.push(h('Button', {
                on: {
                  click: () => {
                    this.handlebomedit(params.row)
                  }
                },
                props: {
                  type: 'warning',
                  size: 'small'
                  // icon: 'ios-brush-outline'
                },
                style: {
                  marginRight: '5px'
                }
              }, '编辑'))

              if (this.editindex === params.index) {
                return h('div', [
                  h('Button', {
                    on: {
                      click: () => {
                        this.handlebomeditsave(params)
                      }
                    },
                    props: {
                      type: 'success',
                      size: 'small'
                      // icon: 'ios-brush-outline'
                    },
                    style: {
                      marginRight: '5px'
                    }
                  }, '保存'),
                  h('Button', {
                    on: {
                      click: () => {
                        this.handlebomeditcancle(params.row)
                      }
                    },
                    props: {
                      type: 'info',
                      size: 'small'
                      // icon: 'ios-brush-outline'
                    },
                    style: {
                      marginRight: '5px'
                    }
                  }, '取消')

                ]);
              } else {
                return h('div', arr);
              }
            }
          }
        ]
 //单行编辑
      handlebomedit(item) {
        this.editindex = item._index
      },
      // bom编辑数量
      handlebomeditsave(params) {
        if (/^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/.test(params.row
            .singleqty)) {
          this.bomdata[params.index] = params.row;
          console.log('this.bomdata', params.row, this.bomdata);
          this.handlesavebom();
        } else {
          this.$Message.warning('请输入正确的数字')
          return;
        }
      },
      handlesavebom() {
        this.editindex = null;
        this.$Message.info("保存成功")
      },

							
							
			vue							
						



						

						
相关
						
				
						
			

																
								

										
创建vue项目的第一步——之安装vue 命令更新了
									
									

								 

        
								
							
							

																
								

										
vue打包报错
									
									

								 

        
								
							
							

																
								

										
vue登录页面后台返回验证码图片
									
									

								 

        
								
							
							

																
								

										
Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）
									
									

								 

        
								
							
							

																
								

										
vue axios 1 创建项目及简单配置axios
									
									

								 

        
								
							
							

																
								

										
vue两层list循环后，内层循环页面选择类型
									
									

								 

        
								
							
							

																
								

										
HMVue1.5【Source Map】
									
									

								 

        
								
							
							

																
								

										
vue代理服务器proxy详情配置信息
									
									

								 

        
								
							
							

																
								

										
[转]Vue-cli3.x引入本地json报404 解决方案
									
									

								 

        
								
							
							

																
								

										
[转]Vue CLI 3搭建vue+vuex 最全分析
									
									

								 

        
								
							
							

																
								

										
AntDesign vue学习笔记（三）嵌套路由使用
									
									

								 

        
								
							
							

																
								

										
vue 多项目部署---二级目录
									
									

								 

        
								
							
							
            
            
            
                                    
           
  			
						

					

														
					
					

					
									

					
									   
标签