如何使用VueJS获取表格勾选行对应ID列的所有值列表

问题原因 #

• 表格v-for绑定的数据源是rows，如果你的过滤目标数据源this.rowsScraped和rows不是指向同一个数组，首先就无法拿到正确的选中状态数据
• reduce用法错误：你给初始值设为空数组，却使用对象属性赋值的逻辑，最终得到的结构不符合ID值列表的要求

正确实现 #

推荐用filter + map的组合，逻辑更清晰易读：

{
  const idList = this.rows
    .filter(row => row.isSelected) // 筛选所有勾选的行
    .map(row => row.details.id_inies) // 提取每行的ID字段组成新数组
  console.log(idList)
  this.$http.admin.putScrapedFDES(idList)
}

如果你需要用reduce实现，正确写法如下：

{
  const idList = this.rows.reduce((acc, row) => {
    if (row.isSelected) acc.push(row.details.id_inies)
    return acc
  }, [])
  console.log(idList)
  this.$http.admin.putScrapedFDES(idList)
}

内容的提问来源于stack exchange，提问作者Howins