转物流商配置页面总结（动态增加删除整个模块，增加删除单条数据）

image.png

image.png

返回的数据类型为对象包含几个数组

vue中v-for循环既可以循环数组，对象数组，对象，数字

1.增加整个模块

data(){
singleTransferSet:{}//初始化对象
}
//当在对象中新增一个key-value时，当增肌一个空对象时，采用this.$set避免视图不更新问题
 let addIndex = Object.values(this.singleTransferSet).length
 this.$set(this.singleTransferSet, addIndex, [{}])
//当新增的数据为以下方法时
 let addIndex = Object.values(this.singleTransferSet).length
 let obj={
 state: 3，
 defaultLogo: '0'，
 forwardConfigType: 'not_arrive'
}
this.singleTransferSet[addIndex ] = [obj]
//this.singleTransferSet发生了改变但是视图并未发生改变

2.增加某个模块里边的单条数据

由于增加的是整个数据中的单条数据，所以把模块当做一个整体直接增加，在singleTransferSet[index]中增加单条数据

 let obj = {
          state: 1,
          defaultLogo: 0,
          forwardConfigType: row.forwardConfigType
        }
this.singleTransferSet[index].push(obj)

保存时拆除单条数据即可。

3.匹配当所有状态均为3时，改变界面的选中状态，如何判断所有的状态均为3？

最开始想要取对象的state，组成一个数组，然后在判断是否是3，显然想的太复杂。我们只需要
let arr = this.fullTransfer.filter(item => item.state === 3)
筛选出状态为3的数组，然后判断新数组和老数组的length是不是相等即可。

4.select框回显，以及已选禁用

 <el-select v-model="full.carrierId"
                         placeholder="请选择物流商"
                         clearable
                         @change="selectCarrier($event,f)"
                         :disabled="!checkedConfig"
                         style="width: 205px;">
                <el-option v-for="item in PubCarrier"
                           :key="item.carrierId"
                           :label="item.carrierName"
                           :disabled="JSON.stringify(fullCarrierList).includes(item.carrierId)"
                           :value="item.carrierId">
                </el-option>
              </el-select>
//当value值要与v-model绑定的值是同一个类型，否则回显失败
//disabled用于禁用数据，但是仅限于只有一个的时候，如果carrierId='10001';currentCarrierId='10001'两个都是用一个的时候，此种方法不使用
当出现这种情况时，可以采用搜集已经选择的id然后利用  disabled同样可以实现`:disabled="currentCarrierIds.includes(item.carrierId)"`

5.动态绑定数据

当前页面中的数据是绑定在v-model上，并且数组都是动态增加的

image.png

所以例如下拉框当选择之后v-model上就直接赋值了，不要再进行手动赋值。
PS:在表格中新增编辑数据是同样的道理，只需要去操作table中的row即可，不需要重新命名去达到新增修改的赋值效果。

6.文件的上传

 <el-upload action="/api/v1/deliver/import"
                       class="ml10"
                       :show-file-list="false"
                       :before-upload="importDeliver"
                       :data='importData'
                       :on-error="handlerError"
                       :on-success="handlerSuccess"
                       :disabled="isRepeat"
                       accept=".xls,.xlsx">
              <el-button class="iconfont icon-import"
                         :loading="isRepeat">导入</el-button>
            </el-upload>
//导入的时候在action表示上传的接口，如果不写会有一个空的localhost在network上，
//:data='importData'上可以添加除了file之外的参数。
//handlerSuccess是返回结果,判断是成功还是失败
handlerSuccess (res, file) {
      this.isRepeat = false
      if (res.code === 'SUCCESS') {
        this.$message.success('导入成功')
      } else {
        this.handlerError(res)
      }

6.传id问题

该页面的状态有新增，修改，禁用，删除状态之间进行转换。
新增是需要不需要传值id，但是新增数据时是根据索引在数组里增加，所以保存时需要去除id。
另外三种状态需要id达到修改的效果。
可以在保存的时候进行数据改造只传后台需要的参数即可。