form

最新推荐文章于 2023-04-20 01:30:31 发布

好想吃螺蛳粉ヾ

最新推荐文章于 2023-04-20 01:30:31 发布

阅读量232

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_45466648/article/details/109093004

版权

<div v-for="(DTOList, i) in productSpecsSaveDTOList" :key="i">
                  <el-form :model="DTOList" ref="DTOList" style="margin:20px">
                    <el-form-item label="规格名" class="noneBorderLeft">
                      <el-row>
                        <el-col :span="4">
                          <el-input v-model="DTOList.specsName" />
                        </el-col>
                        <el-col :span="1" :offset="18">
                          <span><i @click.prevent="removeDTOList(DTOList)" slot="suffix" class="el-input__icon el-icon-error" style="font-size: 20px"></i></span>
                        </el-col>
                      </el-row>
                    </el-form-item>
                    <el-form-item  label="规格值" class="noneBorderLeft">
                      <el-row :gutter="4">
                        <el-col :span="4" v-for="(item1, index1) in DTOList.productSpecsValueSaveDTOS" :key="index1" style="display:inline-block">
                          <el-input v-model="item1.specsValues">
                            <i @click.prevent="removespecsValues(item1, DTOList, i)" slot="suffix" class="el-input__icon el-icon-close" style="color:black;font-weight:bold;font-size:20px"></i>
                          </el-input>
                        </el-col>
                        <el-col :span="4" >
                          <el-button type="text" size="small" style="padding:5px" @click="addSpecsValues(DTOList,i)">添加规格值</el-button>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-form>
                </div>
                <el-button type="primary" size="small" @click="addList()">添加规格</el-button>

// 删除规格名和下面的规格值
    removeDTOList(DTOList) {
      var index = this.productSpecsSaveDTOList.indexOf(DTOList)
      if (index !== -1) {
        this.productSpecsSaveDTOList.splice(index, 1)
      }
    },
    // 删除规格值
    removespecsValues(item1,DTOList,i) {
      let index = DTOList.productSpecsValueSaveDTOS.indexOf(item1)
      if (index !== -1) {
        DTOList.productSpecsValueSaveDTOS.splice(index, 1)
      }
    },
    // 添加规格名
    addList() {
      this.productSpecsSaveDTOList.push({
        productSpecsValueSaveDTOS:[
          {
            cost : null,
            imgUrl : "",
            marketValue : null,
            price : null,
            specsValues: "",
            stock : null,
          }

        ],
        specsName : "",
        key: Date.now()
      })
    },
    // 添加规格值
    addSpecsValues(DTOList, i) {
      DTOList.productSpecsValueSaveDTOS.push({
          cost : null,
          imgUrl : "",
          marketValue : null,
          price : null,
          stock : null,
          specsValues: '',
          key: Date.now()
      })
    },