如何使用VueJS返回列的所有单元格中的值列表答案

【问题标题】：How to return a list of value in all cells of a column with VueJS如何使用VueJS返回列的所有单元格中的值列表
【发布时间】：2021-10-23 08:48:02
【问题描述】：

我有一个这样的 HTML 表格：

  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Nouveaux FDES</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="row in rows">
      <td> {{ row.details.id_inies }} </td>
      <td> <a :href="row.url" target="_blank" rel="noreferrer noopener">{{ row.name }}</a></td>
      <td style="text-align: center; vertical-align: middle;"> <input v-model="row.isSelected" type="checkbox"> </td>
    </tr>
  </tbody>

我的目标是在ID 列的单元格中获取值，并且仅在用户使用复选框选择的单元格中获取值

我尝试了类似的方法，但它不起作用：

{
     const selectedFDES = this.rowsScraped.filter((fdes) => fdes.isSelected === true);
     const idList = selectedFDES.reduce((acc, item) => {
       acc[item.details.id_inies] = [];
       return acc;
     }, []);
     console.log(idList);
     this.$http.admin.putScrapedFDES(idList);
   }

【问题讨论】：

标签： javascript html typescript vue.js

【解决方案1】：

你的 reducer 函数没有多大意义。它应该看起来像这样：

const selectedFDES = this.rowsScraped.filter(r => r.isSelected);
const idList = selectedFDES.reduce((acc, item) => {
  acc.push(item.details.id_inies);
  return acc;
}, []);
console.log(idList);
this.$http.admin.putScrapedFDES(idList);

对于您的情况，我相信.map() 会更短、更简洁、更易读：

const idList = this.rowsScraped
  .filter(r => r.isSelected)
  .map(r => r.details.id_inies);
this.$http.admin.putScrapedFDES(idList);

在这里查看它的工作原理：

new Vue({
  el: '#app',
  data: () => ({
    rows: ['First', 'Second', 'Third']
      .map((name, i) => ({
        name: `${name} row`,
        details: {
          id_inies: i + 1,
        },
        url: '#',
        isSelected: false
      }))
  }),
  computed: {
    selectedRows() {
      return this.rows
        .filter(row => row.isSelected)
        .map(row => row.details.id_inies)
    }
  },
  watch: {
    selectedRows(newVal, oldVal) {
     // This runs every time selectedRows changes value
     console.log({ newVal, oldVal });
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id="app">
  <table>
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Nouveaux FDES</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows">
        <td> {{ row.details.id_inies }} </td>
        <td> <a :href="row.url" target="_blank" rel="noreferrer noopener">{{ row.name }}</a></td>
        <td style="text-align: center; vertical-align: middle;"> <input v-model="row.isSelected" type="checkbox"> </td>
      </tr>
    </tbody>
  </table>
  <pre v-text="selectedRows" />
</div>

【讨论】：

感谢您的帮助！效果很好！