el-table+el-from 动态生成表格表单_el-form怎么做成表格-优快云博客

本文链接：https://blog.youkuaiyun.com/guoshujie1/article/details/102623955

本文详细介绍了一种基于Web的转运服务订单提交流程，包括商品信息填写、增值服务选择及订单提交确认。通过表格形式录入商品详细信息，如图片、名称、类别、数量和备注，并提供拆包检查和取出发票等增值服务选项。文章还强调了阅读并同意检验规则和服务协议的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

完整代码

el-select @change const obj = array.find( i => i.id = id)
代替for双循环
el-checkbox-group @change val.indexOf(‘1’) > -1
判断数据中是否有这个值
:prop="‘tableData.’ + scope.$index + ‘.productName’"
表单数组中对象展示

<template>
  <div class="transropt-warp container">
    <div class="common-title"><h2>Transropt</h2></div>
    <div class="transropt-container">
      <div class="transropt-from">
        <el-form :rules="rules" :model="model"  ref="form">
          <el-table :data="model.tableData" style="width: 100%" empty-text=" " :header-cell-style="{background:'#0f83ea',color:'#fff'}">
            <el-table-column prop="productImg" label="Image" min-width="70">
                <template>
                    <img src="../assets/img/transropt/default.png" alt="" class="transropt-table-img">
                </template>
            </el-table-column>
            <el-table-column prop="productName" label="Item Name" min-width="250">
                <template slot-scope="scope">
                    <el-form-item :prop="'tableData.' + scope.$index + '.productName'" :rules='rules.productName'>
                      <el-input v-model="scope.row.productName" placeholder="Enter product name or paste link" size="small" clearable></el-input>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column prop="transportCategoryId" label="*Category" min-width="180">
                <template slot-scope="scope">
                  <el-form-item :prop="'tableData.' + scope.$index + '.transportCategoryId'" :rules='rules.productTypeTemp'>
                    <el-select v-model="scope.row.transportCategoryId" placeholder="select category" size="small">
                        <el-option-group
                          v-for="(group, index) in categoryList"
                          :key="index"
                          :label="group.label"
                          >
                          <el-option
                            v-for="item in group.options"
                            :key="item.value"
                            :label="item.name"
                            :value="item.id">
                            <div v-if="item.name === '普货'">
                              <span>普货 </span>
                              <el-popover
                                placement="top-start"
                                width="250"
                                trigger="hover"
                                content="一般的衣服、包包、鞋靴、裤袜、书籍、配饰、日常家居用品、收纳用品、床上用品、窗帘、布匹、卫生棉、纸巾，服装配饰等都算是普货。国外品牌产品（无论正品或仿品）一律不接，请知悉。">
                                <i slot="reference" class="el-icon-question"></i>
                              </el-popover>
                            </div>
                          </el-option>
                        </el-option-group>
                    </el-select>
                  </el-form-item>
                </template>
            </el-table-column>
            <el-table-column prop="productCount" label="Quantity" min-width="155">
                <template slot-scope="scope">
                  <el-form-item>
                    <el-input-number v-model="scope.row.productCount" @change="handleChange" :min="1" size="small"></el-input-number>
                  </el-form-item>
                </template>
            </el-table-column>
            <el-table-column prop="productComment" label="*Note(not required)" min-width="280">
                <template slot-scope="scope">
                  <el-form-item :prop="'tableData.' + scope.$index + '.productComment'" :rules='rules.productComment'>
                    <el-input v-model="scope.row.productComment" placeholder="Remark features of the goods" size="small" clearable></el-input>
                  </el-form-item>
                </template>
            </el-table-column>
            <el-table-column label="Action" min-width="75">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="delGoods(scope.$index)"><i class="el-icon-delete"></i></el-button>
                </template>
            </el-table-column>
          </el-table>
        </el-form>
        <div class="transropt-btn"><el-button type="primary" @click="addGoods"><i class="el-icon-plus"></i>Add goods</el-button></div>
      </div>
      <div class="transropt-submit">
        <p><span>Value-added Services</span>
            <el-checkbox-group v-model="checkList" @change="changeServices">
                <el-checkbox label="1">Unpacking inspection</el-checkbox>
                <el-checkbox label="2">Take out Invoice</el-checkbox>
            </el-checkbox-group>
        </p>
        <p>
            <el-checkbox v-model="isChecked">I have read and agree to <a href="javascript:;">Inspection Rules and Service Agreement</a></el-checkbox>
            <el-button type="danger" @click="submitFrom">Submit Order</el-button>
        </p>
        <p><a href="javascript:;">View my order</a></p>
      </div>
      <el-dialog title="提示" :visible.sync="isDialog.dialogVisible" width="30%" :before-close="handleClose">
        <span>提交成功</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogView">继续提交</el-button>
          <el-button type="text"><a href="">查看转运单</a></el-button>
        </span>
      </el-dialog>
      <!-- <div class="transropt-footer">
         <img src="../assets/img/transropt/divide.png" alt="" class="transropt-footer-img">
         <h2>Conslidation WareHouse</h2>
         <p class="transropt-footer-p">Please login to <a href="javascript:;">User Center</a> to view your exclusive wareHouse!</p>
         <h2>Conslidation Process</h2>
         <ul class="transropt-express">
            <li>
                <i class="expre-one"></i>
                <p>1.Submit Item list</p>
                <p>Submit the consolidation item list in Toppgo website</p>
            </li>
            <li>
                <i class="expre-two"></i>
                <p>2.System Approves</p>
                <p>Once approve,ship the package to the warehouse,and complete logistics information</p>
            </li>
            <li>
                <i class="expre-tre"></i>
                <p>3.Received by Toppgo</p>
                <p>Once items are shipped to the warehouse,we will receive the item into Toppgo warehouse</p>
            </li>
            <li>
                <i class="expre-for"></i>
                <p>4.Submit for Delivery</p>
                <p>Submit items in "My Warehouse" for delivery,and pay for consolidation fee</p>
            </li>
            <li>
                <i class="expre-fiv"></i>
                <p>5.Confirm Receipt</p>
                <p>Packages are shipper to overseas address pending confirmation upon receipt</p>
            </li>
         </ul>
         <h2>Conslidation Service</h2>
         <ul class="transropt-service">
            <li>
              <i class="service-one"></i>
              <p>1. Combine packages at your will</p>
            </li>
            <li>
              <i class="service-two"></i>
              <p>2.Unpack and check items</p>
            </li>
            <li>
              <i class="service-thr"></i>
              <p>3.Take out invoices/receipts</p>
            </li>
             <li>
              <i class="service-for"></i>
              <p>4.More services</p>
            </li>
         </ul>
         <div class="transport-charge"><el-button type="success" round plain>Transport Charge</el-button></div>
         <h2>Frequently Asked Questions</h2>
         <ul class="transport-ask">
          <li>
            <p>Where can I check the address of my exclusive warehouse？</p>
            <p>In order to use the consolidation services, you need to first ship the items to our warehouse. When you register as a member of Toppgo, an exclusive warehouse address will be provided. View <a href="javascript:;">My warehouse</a>。</p>
          </li>
          <li>
            <p>Q:May I use consolidation services for any items?</p>
            <p>A:Due to the customs policy in different countries and the uniqueness of international transportation, strict restrictions may apply. Please view <a href="javascript:;">Restrictions for Imports and Exports</a>，For more information, please contact our Customer Service</p>
          </li>
          <li>
            <p>Q:How to inquiry about logistics information on the Internet?</p>
            <p>A:You can find parcels submitted for delivery in <a href="javascript:;">My Package</a> page and then enter the waybill details page to view the logistics information.You can also go to the <a href="javascript:;">Toppgo</a> to query.</p>
          </li>
          <li><a href="javascript:;">More>></a></li>
         </ul>
      </div> -->
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: '',
  components: {},
  props: {},
  inject: ['reload'],
  data () {
    return {
      isChecked: false,
      isOpenBoxNeed: false,
      isTakeOutInvoiceNeed: false,
      buyForUrl: '',
      model: {
        tableData: [{
          productUrl: '',
          productImg: '',
          productName: '',
          productTypeTemp: '',
          productType: '',
          transportCategoryId: '',
          productComment: '',
          productCount: 1,
          fromType: 'BALIDROP',
          openBoxNeed: Boolean,
          takeOutInvoiceNeed: Boolean,
          needAudit: Boolean
        }]
      },
      rules: {
        productName: [{required: true, message: "Content cannot be empty", trigger: "blur"}],
        productTypeTemp: [{required: true, message: "Content cannot be empty", trigger: "change"}],
        productComment: [{required: true, message: "Content cannot be empty", trigger: "blur"}]
      },
      checkList: []
    }
  },
  computed: {
    ...mapState({
      categoryList: state => state.shipFor.categoryList,
      needCategory: state => state.shipFor.needCategory,
      noNeedCategory: state => state.shipFor.noNeedCategory,
      isDialog: state => state.shipFor.isDialog
    })
  },
  created () {
    this.getCategoryA()
  },
  mounted () {
    let step = window.top.location.href.split('?')[1] // 当前页面最顶层url
    console.log('step', window.top.location.href.split('?')[1], window.location.search)
    this.buyForUrl = step ? '/trade/content/transport-order/iframeCart.html?' + step : '/trade/content/transport-order/iframeCart.html?'
  },
  methods: {
    ...mapActions('shipFor', ['getCategoryA', 'saveCategoryA']),
    handleChange () {},
    addGoods () {
      var {openBoxNeed, takeOutInvoiceNeed, needAudit} = Boolean
      var productCount = 1
      const fromType = 'BALIDROP'
      var {productUrl, productImg, productName, productTypeTemp, productType, transportCategoryId, productComment} = ''
      this.model.tableData.push({openBoxNeed, takeOutInvoiceNeed, needAudit, productUrl, fromType, productImg, productName, productTypeTemp, productType, transportCategoryId, productCount, productComment})
    },
    delGoods (index) {
      this.model.tableData.splice(index, 1)
    },
    changeServices (val) {
      if (val.indexOf('1') > -1) {
        this.isOpenBoxNeed = true
      } else {
        this.isOpenBoxNeed = false
      }
      if (val.indexOf('2') > -1) {
        this.isTakeOutInvoiceNeed = true
      } else {
        this.isTakeOutInvoiceNeed = false
      }
    },
    dialogView () {
      this.isDialog.dialogVisible = false
      this.reload()
    },
    handleClose () {
      this.isDialog.dialogVisible = false
    },
    submitFrom () {
      const arryList = this.model.tableData
      const newList = [...this.needCategory, ...this.noNeedCategory]
      const submitFormData = {};

      for (var i = 0; i < arryList.length; i++) {
        for (var j = 0; j < newList.length; j++) {
          if (arryList[i].transportCategoryId === newList[j].id) {
            arryList[i].needAudit = newList[j].auditNeed
            arryList[i].productTypeTemp = newList[j].name
            arryList[i].productType = newList[j].i18nkey
            arryList[i].openBoxNeed = this.isOpenBoxNeed
            arryList[i].takeOutInvoiceNeed = this.isTakeOutInvoiceNeed
          }
        }

        var arrayListItem = arryList[i]
        for (var key in arrayListItem) {
          var keyName = "transportOrders[" + i + "]." + key
          submitFormData[keyName] = arrayListItem[key]
        }
      }
      if (this.isChecked) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.saveCategoryA(submitFormData)
          } else {
            console.log('error submit!!')
            return false;
          }
        })
      } else {
        this.$notify({
          title: 'WARNING',
          message: 'Please check if you do not agree to the inspection rules and service agreement',
          type: 'warning'
        })
      }
    }
  }
}
</script>
<style lang="scss">
@import '../assets/scss/transport.scss';
</style>

css

.transropt-warp{
    .common-title{
     height: 43px;
     h2{
      font-size: 24px;
      color: #333333;
     }
    }
    .transropt-container{
      border-radius: 4px;
      background-color: #fff;
      padding: 10px 20px 30px;
        .transropt-from{
            padding: 10px;
            background-color: #d9edff;
            .transropt-table-img{
                width: 40px;
                height: 40px;
            }
            .el-input-number__decrease,
            .el-input-number__increase{
                background-color: #fff;
            }
            .transropt-btn{
                padding: 35px 0;
                text-align: center;
                background-color: #fff;
                .el-button{
                    width: 150px;
                    height: 48px;
                    font-weight: 700;
                }
                .el-button--primary{
                    background-color: #0f83ea;
                }
            }
        }
        .transropt-submit{
            padding:20px 0 65px;
            p{
                text-align: right;
            }
            p:nth-child(1){
                .el-checkbox-group{
                    display: inline-block;
                }
            }
            p:nth-child(2){
                display: flex;
                justify-content: space-between;
                a{
                    color: #333333;
                    &:hover{
                        color: #0f83ea;
                    }
                }
            }
            p:nth-child(3){
               a{
                   color: red;
               }
            }

        }
        .transropt-footer{
            h2,
            .transropt-footer-p,
            .transropt-service,
            .transropt-express,
            .transport-charge,
            .transport-ask{
                padding-top:50px;
            }
            .transropt-footer-img{
                width: 100%;
            }
            h2{
                text-align: center;
                font-size: 28px;
                color: #999;
            }
            .transropt-footer-p{
                text-align: center;
                color: #333333;
            }
            .transropt-service,
            .transropt-express{
                display: flex;
                justify-content: space-around;
            }
            .transropt-express{
                li{
                    width: 220px;
                    i{
                        display: inline-block;
                        width: 190px;
                        height: 130px;
                    }
                    .expre-one{
                        background: url('../assets/img/transropt/express.png') no-repeat 1% 0%;
                    }
                    .expre-two{
                        background: url('../assets/img/transropt/express.png') no-repeat 27% 0%;
                    }
                    .expre-tre{
                        background: url('../assets/img/transropt/express.png') no-repeat 53% 0%;
                    }
                    .expre-for{
                        background: url('../assets/img/transropt/express.png') no-repeat 79% 0%;
                    }
                    .expre-fiv{
                        background: url('../assets/img/transropt/express.png') no-repeat 105% 0%;
                    }
                    p:nth-child(2){
                        color: #989898;
                        font-size: 20px;
                        font-weight: 700;
                    }
                    p:nth-child(3){
                        color: #9f9f9f;
                    }
                }
            }
            .transropt-service{
                li{
                    width: 185px;
                    i{
                        display: inline-block;
                        width: 185px;
                        height: 150px;
                    }
                    .service-one{
                        background: url('../assets/img/transropt/more.png') no-repeat 10% 0%;
                    }
                    .service-two{
                        background: url('../assets/img/transropt/more.png') no-repeat 37% 0%;
                    }
                    .service-thr{
                        background: url('../assets/img/transropt/more.png') no-repeat 64% 0%;
                    }
                    .service-for{
                        background: url('../assets/img/transropt/more.png') no-repeat 90% 0%;
                    }
                    p:nth-child(2){
                        color: #989898;
                        font-weight: 700;
                        text-align: center;
                    }
                }
            }
            .transport-charge{
                text-align: center;
                .el-button{
                    width: 225px;
                    height: 60px;
                    border-radius:30px;
                    font-size: 20px;
                }
            }
            .transport-ask{
                li{
                    p:nth-child(1){
                        color: #989898;
                        font-weight: 700;
                    }
                    p:nth-child(2){
                        color: #989898;
                        font-size: 10px;
                    }
                }
                li:nth-child(4){
                    text-align: right;
                }
            }
        }
    }
    .el-popover {
        background-color: #ccc !important;
    }
}