Vue.js 中使用 filter() 删除数组元素，并更新 cfMx.value

在 Vue.js 项目中，经常需要从数组中删除特定的元素。例如，在删除表格行时，需要将对应数据从 cfMx.value 数组中移除。本篇文章将介绍如何使用 filter() 方法实现这一操作。

代码示例

假设 cfMx 是一个 ref，包含一个包含多个对象的数组。props.row 是一个对象，代表要删除的表格行数据。

const cfMx = ref([]);
props.row = ref({
  name: '',
  space: '',
  yxjl: '',
  cfmxMedid: '',
  cfmxPrjid: '',
  cfmxDj: '',
  cfmxSl: '',
  cfmxZe: '',
  cfmxMedicine: '',
  cfmxProject: '',
  cfmxYxjl: '',
  cfmxJldw: '',
  cfmxBeizhu: '',
  quantity: '',
  unit: '',
  id: '',
  cfmxYyfsID: 1,
  cfmxYyplID: 1,
  cfmxTs: 1,
  type: '',
  cfmxFygl: '',
  mxpl: '',
  mxfs: '',
});

async function onDeleteRow(props) {
  await tableRef.value?.removeRows(props.row);
  cfTotal.value = cfTotal.value - props.row.cfmxZe;
  cfMx.value = cfMx.value.filter(item => item.id !== props.row.id);
}

代码解析

cfMx.value.filter(item => item.id !== props.row.id)：使用 filter() 方法过滤 cfMx.value 数组，保留 id 不等于 props.row.id 的元素，并将结果重新赋值给 cfMx.value。
item.id !== props.row.id: 比较每个元素的 id 属性值与 props.row 的 id 属性值，如果不同，则保留该元素。

总结

使用 filter() 方法可以轻松地从数组中删除特定元素。通过比较每个元素的属性值，我们可以过滤掉不需要的元素，并将过滤后的结果赋值给原数组。

Vue.js 中使用 filter() 删除数组元素，并更新 cfMx.value