涉及js拼接字符串、以及vue向列表追加数据

<template>
  <div>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

    　　<el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item>

    　　<el-form-item label="即时配送" prop="delivery"> <el-switch v-model="ruleForm.delivery"></el-switch> </el-form-item>

    　　<el-form-item label="特殊资源" prop="resource"> <el-radio-group v-model="ruleForm.resource">

    　　　　<el-radio label="线上品牌商赞助"></el-radio> <el-radio label="线下场地免费"></el-radio> </el-radio-group> </el-form-item>

    　　<el-form-item label="活动形式" prop="desc"> <el-input type="textarea" v-model="ruleForm.desc"></el-input> </el-form-item>

    　　<el-form-item>

    　　　　<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>

    　　　　<el-button @click="resetForm('ruleForm')">重置</el-button>

    　　</el-form-item>

  </el-form>
  <el-table
    :data="list"
    border
    stripe
    height="313">
    <el-table-column
      v-for="info in rightHeader" :key="info.key"
      :property="info.key"
      :label="info.label"
    >
      <template slot-scope="scope">
        {{scope.row[scope.column.property]}}
      </template>
    </el-table-column>
    <el-table-column label="即时配送">
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.delivery"
          :active-color="ACT_COLOR"
          :inactive-color="INACT_COLOR">
        </el-switch>
      </template>
    </el-table-column>
  </el-table>
<!--  <myButton ref="myButton" />-->
  </div>
</template>
<script>

  import Button from './Buttom.vue'
  export default {
    name:"Header",
    components:{
      'myButton': Button
    },
    data() {
      return {
        maxCode:5,
        maxId:225,
        rightHeader: [
          {
            label: '编码',
            key: 'code'
          },
          {
            label: '活动名称',
            key: 'name'
          },
          {
            label: '特殊资源',
            key: 'resource'
          },
          {
            label: '活动形式',
            key: 'desc'
          }
        ],
        list: [{
          "id":221,
          "code": "01",
          "name": "南京测试活动",
          "resource":"线下品牌商赞助",
          "desc": "活动地址南京",
          "delivery":true
        }, {
          "id":222,
          "code": "02",
          "name": "测试活动02",
          "resource":"线上品牌商赞助",
          "desc": "活动地址镇江",
          "delivery":false
        }, {
          "id":223,
          "code": "03",
          "name": "测试活动01",
          "resource":"线下品牌商赞助",
          "desc": "医生对成药处方权限",
          "delivery":true
        }, {
          "id":224,
          "code": "04",
          "name": "测试活动2",
          "resource":"线上品牌商赞助",
          "desc": "活动地址南京江宁区",
          "delivery":true
        },{
          "id":225,
          "code": "05",
          "name": "测试活动1",
          "resource":"线下品牌商赞助",
          "desc": "活动地址南京",
          "delivery":false
        }],
        ruleForm: { name: '', region: '', delivery: false, type: [], resource: '', desc: '' },
        rules: {
          name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ],
          resource: [ { required: true, message: '请选择活动资源', trigger: 'change' } ],
          desc: [ { required: true, message: '请填写活动形式', trigger: 'blur' } ] } };
    },
    methods: {
      submitForm(formName) {

        this.$refs[formName].validate((valid) => {

            console.log("formName***>>>"+formName);
            console.log("valid>>>>>>"+valid);
            if (valid) {
              let product = JSON.stringify(this.ruleForm)
              console.log(product);
              // Button.methods.add(Button.data(),product);
              //这里一般调用提交接口

              this.maxCode += 1;
              this.maxId += 1;

              //js拼接字符串，模拟生成code
              if(this.maxCode < 10){
                this.maxCode = "0".concat(this.maxCode);
              }

              //向列表追加数据
              this.list.push({
                id:this.maxId,
                code: this.maxCode,
                name: this.ruleForm.name,
                resource:this.ruleForm.resource,
                desc: this.ruleForm.desc,
                delivery:this.ruleForm.delivery
              });

              console.log("maxCode转为数字："+parseInt(this.maxCode));
              this.maxCode = parseInt(this.maxCode);
            } else {

              console.log('error submit!!');

              return false;
            }//这个一般写this.$message.error("填写完整") 提醒用户还有未填的或者填错格式的

        });
      },
      resetForm(formName) { this.$refs[formName].resetFields(); }

    },
    mounted() {

    }} </script>