elementUi 表格内输入框深拷贝问题处理

问题：使用el-table 表格，其内有输入框内容，每行的表单内容设置后，不能影响其他行的数据内容；

因为el-table 表格内容编辑框的值都是直接从表格的row中取值赋值的 属于浅克隆  所以同一源里的数值也会改变；

解决方法：使用Object.assign()赋值，不要直接赋值；

效果如下：

主要代码如下：

<template>
  <div class="system-ship-money overflow-auto">
    <el-form :model="form" label-width="80px">
      <div class="pb-50">
        <el-form-item label="计费依据">
          <el-select v-model="form.type" placeholder="请选择" @change="onChangeType(form.type)">
            <el-option
              v-for="item in typeList"
              :key="item.type"
              :label="item.name"
              :value="item.type"
            />
          </el-select>
        </el-form-item>
        <el-form-item label-width="0">
          <el-checkbox v-model="form.is_fee_status" class="ml-15">启用包邮</el-checkbox>
          <div v-show="form.is_fee_status" class="pl-35">
            <el-radio-group v-model="form.free_type">
              <div class="mtb-10">
                <el-radio :label="1">全场满￥
                  <el-input v-model="form.all_free_money" size="small" style="width: 120px;" placeholder="请输入金额" />
                  包邮
                </el-radio>
              </div>
              <div class="mtb-10">
                <el-radio :label="2">分客户、区域设置包邮金额</el-radio>
              </div>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label-width="0">
          <el-table
            ref="shipData"
            :data="form.ship_template"
            tooltip-effect="light"
          >
            <el-table-column label="增/删" prop="type" width="90" align="center">
              <template slot-scope="scope">
                <i class="el-icon-plus" @click="addShipMode(scope.$index)" />
                <i
                  v-if="form.ship_template.length!==1"
                  class="el-icon-minus"
                  @click="delShipMode(scope.$index)"
                />
              </template>
            </el-table-column>
            <el-table-column
              class-name="ship_template-center"
              label="配送方式"
              prop="name"
              width="130"
              align="center"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="{row, $index}">
                <el-form :model="row">
                  <el-input
                    v-if="row.is_edit_type"
                    v-model="row.name"
                    size="small"
                    class="input-box"
                    @blur="loseFcous($index, row)"
                  />
                  <span v-else @click="rowClick($index, row)">{{ row.name }}</span>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              label="适用客户"
              prop="level_id"
              width="200"
              align="center"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.is_default == 1 && scope.row.level_id == 0">全部级别</span>
                <el-select
                  v-else
                  v-model="scope.row.level_id"
                  multiple
                  collapse-tags
                  style="width:100%"
                  placeholder="请选择级别"
                >
                  <el-option
                    v-for="item in listRoles"
                    :key="item.level_id"
                    :label="item.name"
                    :value="item.level_id"
                  />
                </el-select>

              </template>
            </el-table-column>
            <el-table-column
              label="收货地区"
              prop="address"
              min-width="200"
              align="center"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.is_default == 1 && scope.row.address_id == 0">通用</span>
                <span v-else>
                  <el-cascader
                    :ref="'address' + scope.$index"
                    v-model="scope.row.address"
                    placeholder="选择地区"
                    :options="pcaList"
                    :props="{ multiple: true, checkStrictly: true, label: 'name', value: 'code', expandTrigger: 'hover' }"
                    collapse-tags
                    clearable
                  />
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="起算量"
              prop="start_amount"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  v-if="scope.row.edit_start_amount"
                  v-model="scope.row.start_amount"
                  size="small"
                  class="input-box"
                  @blur="loseFcous(scope.$index, scope.row)"
                />
                <span v-else @click="scope.row.edit_start_amount = true">{{ scope.row.start_amount }} {{ unit || '' }} </span>
              </template>
            </el-table-column>
            <el-table-column
              label="运费"
              prop="item_sn"
              width="120"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  v-if="scope.row.edit_start_money"
                  v-model="scope.row.start_money"
                  size="small"
                  class="input-box"
                  @blur="loseFcous(scope.$index, scope.row)"
                />
                <span v-else @click="scope.row.edit_start_money = true">￥{{ scope.row.start_money }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="续件"
              prop="add_amount"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  v-if="scope.row.edit_add_amount"
                  v-model="scope.row.add_amount"
                  size="small"
                  class="input-box"
                  @blur="loseFcous(scope.$index, scope.row)"
                />
                <span v-else @click="scope.row.edit_add_amount = true">每{{ scope.row.add_amount }}{{ unit || '' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="续运费"
              prop="add_money"
              width="120"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  v-if="scope.row.edit_add_money"
                  v-model="scope.row.add_money"
                  size="small"
                  class="input-box"
                  @blur="loseFcous(scope.$index, scope.row)"
                />
                <span v-else @click="scope.row.edit_add_money = true">￥{{ scope.row.add_money }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="form.free_type == 2"
              label="满额包邮"
              prop="free_money"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <el-input
                  v-if="scope.row.edit_free_money"
                  v-model="scope.row.free_money"
                  size="small"
                  class="input-box"
                  @blur="loseFcous(scope.$index, scope.row)"
                />
                <span v-else @click="scope.row.edit_free_money = true">满￥{{ scope.row.free_money }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </div>
      <div class="fixed-posab-bottom">
        <div class="text-center mtb-10">
          <el-button size="medium" @click="closeOpenOff">取消</el-button>
          <el-button size="medium" :loading="loading" type="primary" @click="onSubmit">保存</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import pca from '@/assets/pca-code'
import { getShipTemplate, editShipTemplate } from '@/api/system/ship-mode'

export default {
  name: 'SystemShipMoney',
  data() {
    return {
      title: '运费设置',
      loading: false,
      pcaList: pca,
      listRoles: [], // 客户级别
      typeList: [],
      unit: '', // 单位
      modeInfo: {
        mode_id: '',
        is_edit_type: false,
        name: '默认配送',
        level_id: '请选择客户级别',
        address: '请选择地区',
        edit_start_amount: false,
        start_amount: 10,
        edit_start_money: false,
        start_money: 0,
        edit_add_amount: false,
        add_amount: 5, // 续件
        edit_add_money: false,
        add_money: 10, // 续费
        edit_free_money: false,
        free_money: 10 // 满额包邮
      },
      form: {
        type: '',
        is_fee_status: false,
        free_type: 1,
        all_free_money: '',
        ship_template: [
          {
            mode_id: '',
            is_edit_type: false,
            name: '默认配送',
            level_id: '全部级别',
            address: '通用',
            edit_start_amount: false,
            start_amount: 10,
            edit_start_money: false,
            start_money: 0,
            edit_add_amount: false,
            add_amount: 5, // 续件
            edit_add_money: false,
            add_money: 10, // 续费
            edit_free_money: false,
            free_money: 10 // 满额包邮
          }
        ] // 运费模板信息
      },
      formRules: {}
    }
  },
  computed: {
    ...mapGetters(['activeTagId'])
  },
  created() {
    this.getShipMode()
  },
  methods: {
    // 输入表单内容
    rowClick(i, row) {
      row.is_edit_type = true
      this.form.ship_template[i].is_edit_type = true
      const editForm = Object.assign({}, row)
      this.$set(this.form.ship_template, i, editForm)
    },
    // 改变计费依据
    onChangeType(type) {
      this.typeList.forEach(item => {
        if (item.type === type) {
          this.unit = item.unit
        }
      })
    },
    // 搜索
    changeCell(value, row, prop) {
      this.planTemplateColums.forEach(item => {
        if (item.parentKey === prop) {
          // 找到parentKey是prop的列 获取列的数组 将row中的这些列改值
          this.$set(row, item.prop, value)
        }
      })
    },
    // 添加
    addShipMode(index) {
      this.modeInfo.id = index + 1
      this.form.ship_template.push(this.modeInfo)
    },
    // 删除
    delShipMode(index) {
      this.form.ship_template.splice(index, 1)
    },
    // 判断输入框的文字正确后 死去焦点隐藏框
    loseFcous(index, row) {
      if (row.is_edit_type) row.is_edit_type = false
      if (row.edit_start_amount) row.edit_start_amount = false
      if (row.edit_start_money) row.edit_start_money = false
      if (row.edit_add_amount) row.edit_add_amount = false
      if (row.edit_add_money) row.edit_add_money = false
      if (row.edit_free_money) row.edit_free_money = false
      const editForm = Object.assign({}, row)
      this.$set(this.form.ship_template, index, editForm)
    },
    // 取模板内容信息
    getShipMode() {
      this.loading = true
      getShipTemplate().then(res => {
        this.loading = false
        if (res.code === 0) {
          this.form = {
            ...this.form,
            ...res.data.ship_info
          }
          this.typeList = res.data.itemRelated ? res.data.itemRelated : [{ name: '数量', type: 1, unit: '' }]
          this.onChangeType(this.form.type)
          // 客户级别
          this.listRoles = res.data.level_info ? res.data.level_info : []
          // 模板信息
          if (res.data.ship_template && res.data.ship_template.length > 0) {
            res.data.ship_template.map(it => {
              it.level_id = it.level_id && it.level_id.length > 0 ? [...it.level_id] : []
              if (!it.is_edit_type) {
                it.is_edit_type = false
              }
              if (!it.edit_start_amount) {
                it.edit_start_amount = false
              }
              if (!it.edit_start_money) {
                it.edit_start_money = false
              }
              if (!it.edit_add_amount) {
                it.edit_add_amount = false
              }
              if (!it.edit_add_money) {
                it.edit_add_money = false
              }
              if (!it.edit_free_money) {
                it.edit_free_money = false
              }
              return it
            })
          }
          // 模板信息处理
          this.form.ship_template = res.data.ship_template ? res.data.ship_template : [
            {
              mode_id: '',
              is_edit_type: false,
              name: '默认配送',
              level_id: '全部级别',
              address: '通用',
              edit_start_amount: false,
              start_amount: 10,
              edit_start_money: false,
              start_money: 0,
              edit_add_amount: false,
              add_amount: 5, // 续件
              edit_add_money: false,
              add_money: 10, // 续费
              edit_free_money: false,
              free_money: 10 // 满额包邮
            }
          ]
        }
      })
    },
    // 编辑提交运费模板设置
    onSubmit() {
      console.log(this.form)
      editShipTemplate(this.form).then(res => {
        if (res.code === 0) {
          this.$message.success(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.pl-35{
    padding-left: 35px;
}
</style>

以上内容仅供部分参考！