jeecgBoot 开发前端组件

实现这种类型的组件
1 表头

  
             客户名
              性别
              身份证号码
             手机号
              操作
            

2.下面的框

 
               
                 
                   
                 
               
               
                 
                   
                     男
                     女
                   
                 
               
               
                 
                   
                 
               
               
                 
                   
                 
               
               
                 
                    
                   
                 
               
             

3.一些相关的变量

 orderMainModel: {jeecgOrderCustomerList: [{}],     //数据源 可以写多个
          jeecgOrderTicketList: [{}]},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 },
        },

4.方法

 addRowCustom () {            //增加的方法
        this.orderMainModel.jeecgOrderCustomerList.push({});
        this.$forceUpdate();
      },
      delRowCustom (index) {        //删除的方法
        console.log(index)
        this.orderMainModel.jeecgOrderCustomerList.splice(index,1);
        this.$forceUpdate();
      },

5.进行添加到数据库的关键代码

    let orderMainData = Object.assign(this.orderMainModel, values);
            //时间格式化
            orderMainData.orderDate = orderMainData.orderDate?orderMainData.orderDate.format('YYYY-MM-DD HH:mm:ss'):null;
            let formData = {
              ...orderMainData,
              jeecgOrderCustomerList: orderMainData.jeecgOrderCustomerList,
            }
             httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            })