在Ant Design Vue（v1.7.8）a-table组件中实现余额自动计算

一、目标

在Ant Design Vue 表格中实现余额自动计算，公式为：剩余量 = 库存量 - 消耗量

二、二次开发基础

现有一个使用Ant Design Vue 表格的开源项目，原始表格有“消耗量”列，且带输入框，数据双向绑定

三、项目结构

stock\Stock.vue ———— 父组件 内容是库存清单

stock\StockAdd.vue ———— 已开发的入库物品列表 可以参考

stock\StockOut.vue ———— 需要二次开发的组件 内容是出库物品列表

四、功能描述

原始功能：在父组件中选择要出库的物品，点击出库，弹出出库物品列表，填写消耗量并提交，然后回到库存清单，库存量变为原库存量减去消耗量后的剩余量

 修改后功能：在弹出的物品列表中添加库存量、剩余量两列只读数据，填写消耗量时，剩余量会随之变化，满足剩余量 = 库存量 - 消耗量。

 五、遇到的问题

出库物品列表StockOut.vue中表格的出库数据，来自传入参数，是从父组件库存清单表中提取的。因为库存清单表中没有消耗量和剩余量数据列，传递过来的对象数组中不含这两个数据项。需要通过map函数遍历数据数组，为每个对象添加 key、consumption、balance 属性，否则剩余量不能一直跟随消耗量变化（只能变化一次）。

this.dataList = this.stockoutData.map(item => {
    return {
        ...item,
        key: item.id, // 加入父组件库存列表中不存在的key属性，使用 ID 值作为 key
        consumption: 0, // 加入父组件库存列表中不存在的“消耗量”列
        balance: item.amount // 加入父组件库存列表中不存在的“剩余量”列
    }
})

其中，dataList是StockOut.vue本地数组，stockoutData是StockOut.vue组件参数，值由父组件传入。

以下是StockOut.vue的参数定义：

  props: {
    stockoutVisiable: {
      default: false
    },
    stockoutData: {
      type: Array
    }
  },

以下是Stock.vue中参数传递的代码：

入参stockoutData被赋值为stockout.data，而stockout.data来自所选的行数据this.selectedRows：

    // “出库”按键的响应方法
    outOfWarehouse () {
      if (!this.selectedRowKeys.length) {
        this.$message.warning('请选择需要出库的物品')
        return
      }
      let goods = this.selectedRows
      let amt = false
      let warningwords = '某个物品'
      goods.forEach(item => {
        item.max = item.amount
        if (item.amount === 0) {
          amt = true
          warningwords = item.name
        }
      })
      if (amt) {
        this.$message.warning(`${warningwords}没有库存！`)
        return
      }
      this.stockout.data = JSON.parse(JSON.stringify(goods))
      this.stockout.visiable = true
    },

this.selectedRows的赋值在onSelectChange()函数中进行，onSelectChange()被设为组件的响应函数。当选中每行前面的复选框时，this.selectedRows就会同步赋值为所选的行的数据。

......

    onSelectChange (selectedRowKeys, selectedRows) {
      selectedRows.forEach(item => {
        if (item.amount === 0) {
          this.$message.warning(`${item.name}没有库存！`)
          return false
        }
      })
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },

由于组件是封装好的，想通过老办法console.log()看内部的变量值得改源码，读懂源码的难度很高，而通过vue的谷歌浏览器插件Vue.js devtools查看内部的变量值就非常简单了。

 六、源码

stock\Stock.vue ———— 父组件 内容是库存清单

stock\StockAdd.vue ———— 已开发的入库物品列表 可以参考

stock\StockOut.vue ———— 需要二次开发的组件 内容是出库物品列表

七、新的疑问

 columns必须是计算属性吗

  computed: {
    ...mapState({
      currentUser: state => state.account.user
    }),
    show: {
      get: function () {
        return this.stockoutVisiable
      },
      set: function () {
      }
    },
    columns () {
      return [{
        title: '序号',
        dataIndex: 'key'
      }, {
        title: '物品名称',
        dataIndex: 'name',
        scopedSlots: { customRender: 'nameShow' }
      }, {
        title: '型号',
        dataIndex: 'type',
        scopedSlots: { customRender: 'typeShow' }
      }, {
        title: '库存量',
        dataIndex: 'amount'
      }, {
        title: '消耗量',
        dataIndex: 'consumption',
        scopedSlots: { customRender: 'consumptionShow' }
      }, {
        title: '剩余量',
        dataIndex: 'balance'
      }, {
        title: '所属类型',
        dataIndex: 'typeId',
        width: 200,
        scopedSlots: { customRender: 'typeIdShow' }
      }, {
        title: '单位',
        dataIndex: 'unit',
        scopedSlots: { customRender: 'unitShow' }
      }, {
        title: '单价',
        dataIndex: 'price',
        scopedSlots: { customRender: 'priceShow' }
      }]
    }
  },

如何将后台api数据中的id列转为antdesignvue中的key？

AI参考答案：

要将后台 API 数据中的 ID 列转换为 Ant Design Vue 中的 key，你可以按照以下步骤进行操作：

1. 首先，确保你已经使用 Ant Design Vue 创建了表格或其他组件，需要将数据作为数据源进行渲染。

2. 在获取到后台 API 数据后，遍历数据数组中的每个对象。

3. 对于每个对象，将其 ID 值提取出来，并将其赋值给一个名为 "key" 的属性。

4. 最后，将更新后的数据数组作为数据源传递给 Ant Design Vue 的组件进行渲染。

以下是一段示例代码，展示了如何将后台 API 数据中的 ID 列转换为 Ant Design Vue 中的 key：

// 假设你已经从后台 API 获取到了数据数组
const apiData = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
  // ...
];

// 遍历数据数组，为每个对象添加 key 属性
const transformedData = apiData.map(item => {
  return {
    ...item,
    key: item.id, // 使用 ID 值作为 key
  };
});

// 将更新后的数据传递给 Ant Design Vue 的组件进行渲染