Vue监听以及一些数据的处理操作

        当判断某个表格里面的数据某一项发生变化时，其他联动的数据也会发生联动等操作。我们就可以通过监听去处理。

        建议弹框前面的checkbox勾选项不要用el-table自带的属性去操作，不易友好。

  <el-table
        ref="multipleTable"
        :data="productList"
        size="mini"
        :border="true"
        style="width: 100%"
        class="table-style"
      >
        <el-table-column type="selection" prop="id" width="40">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checked" />
          </template>
        </el-table-column>

        <el-table-column prop="productName" label="商品名称" />
        <el-table-column prop="productPrice" :formatter="productPriceCaclute" label="单价" />
        <el-table-column prop="productNum" label="购买数量" />
        <el-table-column prop="" label="退款数量">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.refundNum"
              class="inputDeep"
              :disabled="scope.row.checked ? false : true"
              oninput="value=value.replace(/\D/g,'').replace(/^0+(\d)/, '$1')"
            />
          </template>
        </el-table-column>
      </el-table>

        js部分

watch: {
    productList: {
      handler(val) {
        if (val && val.length > 0) {
          const flag = val.some((v) => v.refundNum > v.productNum)
          if (flag) {
            this.$message({
              showClose: true,
              message: '退款数量不可大于购买数量',
              type: 'error'
            })
            this.disabledButton = true
            return
          }
          let sum = 0
          for (var i in val) {
            if (val[i].refundNum && val[i].checked) {
              sum += val[i].refundNum * val[i].productPrice
            }
          }
          this.disabledButton = false
          this.totalPrice = (sum / 100).toFixed(2)
        }
      },
      deep: true,
      immediate: true
    }
  },

        后端没有给我们想要的数据时我们可以进行处理成自己想要的格式进而去渲染，建议数组的方法连这写，可以简化代码量

例如如下代码：

 back(row) {
      this.dialogVisible = true
      this.backList = row
      const { productList } = this.backList
      this.productList = productList
        .filter((v) => v.productNum !== v.refundNum)
        .map((v) => {
          return {
            ...v,
            productNum: v.productNum - v.refundNum,
            refundNum: null,
            checked: false
          }
        })
    },

        在使用Vue2时，接收后端返回的数据时建议进行类型检测，所以在这些直接使用后台接口返回值的地方，最好添加类型检测。

        例如：

---

不积跬步,无以至千里;不积小流,无以成江海