1.類似這樣的批量修改

批量修改.png

2.代碼

<template>
  <div>
    <div class="pro-move">
      <div class="g-of-h g-mt-15">
        <p class="g-c-33 g-f-600 g-f-l g-ml-5" style="width: 722px;">商品名稱</p>
        <p class="g-c-33 g-f-600 g-f-l">完善型號(hào)</p>
      </div>
      <div class="g-of-h g-mt-15" v-for="( model,index ) in getAllModel" :key="index">
        <div class="g-f-l g-c-33 brand-txt" style="width: 670px;padding-left: 5px;">{{ model.PTitle }}</div>
        <div class="g-f-l" style="margin-left: 58px;">
          <input type="text" class="model-input" placeholder="請(qǐng)輸入型號(hào)" ref="modelNew" v-model="PModel[index]" @blur="testModel(model,index)">
        </div>
      </div>
    </div>
    <div class="g-mt-10 m-btn-box g-of-h">
      <a href="javascript:;" class="btn-a newTask g-f-r"  @click="saveChangeModel()">保存</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      getAllModel:[{
        id:1,
        PTitle:'pe透明拉鏈自封袋定做 訂做PE服裝袋圍巾袋'
      }],
      PModel:[],
      testModelN:[],
      map:new Map()
    }
  },
  methods: {
    /*驗(yàn)證輸入的內(nèi)容*/
    testModel(model,index) {
      if(this.PModel[index] && this.PModel[index].length > 20){
        this.$refs.modelNew[index].style.borderColor = "#ff7300" /*用this.$refs.modelNew[index]可以取到填數(shù)據(jù)的那個(gè)輸入框*/
        this.$message.error('型號(hào)不能超過(guò)20個(gè)字符!');
        this.testModelN[index] = true
        return
      }else {
        this.testModelN[index] = false
        this.$refs.modelNew[index].style.borderColor = "#ececec"
        if(this.PModel[index] !== '' && this.PModel[index] !== undefined) {
          this.map.set(model.ID,this.PModel[index]) /*用Map對(duì)象來(lái)存儲(chǔ)用戶填入的內(nèi)容 不會(huì)有重復(fù)*/
        }
      }
    },
    /*保存內(nèi)容*/
    saveChangeModel() {
      let that = this
      if(this.PModel.length == 0){
        this.$message.error('請(qǐng)先輸入型號(hào)!');
        return
      }
      for(const i in this.testModelN){
        if(this.testModelN[i]){
          this.$message.error('型號(hào)不能超過(guò)20個(gè)字符!');
          return
        }
      }
      this.map.forEach(function(value,key){ /*取出map里的值 放到數(shù)組里 根據(jù)自己想要的數(shù)量來(lái)取*/
        that.submitModel.push({
          id:key,
          content:value
        })
      });
      supplyDraftPModel(that.submitModel).then(res => {
        if(res.code == 1) {
          this.$message.success('保存成功!');
          that.submitModel = [] /*保存后要清空，不然有重復(fù)*/
          that.PModel = []
          // console.log(that.PModel)
          that.map = new Map()
          setTimeout(()=>that.getBrandOrModel(1),500) /*getBrandOrModel獲取數(shù)據(jù)的*/
        }
      }).catch(err => {
        console.log(err)
        this.$message.error('保存失敗!');
      })
    },
  }
}
</script>

<style scoped>
.g-f-l{
  float: left;
}
.g-of-h{
  overflow: hidden;
}
.pro-move{
  border: 1px solid #dcdcdc;padding: 20px;
  border-top: 0;
  height: 535px;
  overflow-y: auto;
  padding-top: 0;
}
.brand-txt{
  width: 800px;padding-left: 10px;
  overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.model-input{
  width: 138px;
  height: 24px;
  background-color: #ffffff;
  border: solid 1px #ececec;
  padding-left: 7px;
  color: #333333;
}
</style>