如何从Vaadin Grid提取多条数据用于函数及AJAX请求？

嘿，我来帮你解决这个问题！你遇到的两个核心问题：data-*属性不生效，以及如何多选数据做AJAX请求，我都给你梳理清楚解决方案。

一、先解决data属性看不到的问题 #

你之所以在开发者工具里找不到data-id和data-desc，是因为Vaadin基于Polymer，而Polymer里绑定HTML特性（attribute）需要用特殊的语法——$=，而不是普通的[[...]]绑定。普通的[[item.itemId]]是绑定DOM元素的属性（property），但data-*属于HTML特性，得这么写：

修改你的按钮代码：

<paper-button on-tap="getData" data-id$="[[item.itemId]]" data-desc$="[[item.description]]">Go</paper-button>

改完之后，你再去开发者工具里看，就能看到对应的data-*属性了，e.target.dataset.description也能正常拿到值~

不过，如果你需要多选数据，单条点击按钮的方式显然不够高效，更推荐直接用Vaadin Grid自带的多选功能，下面给你讲具体实现。

二、实现多选数据并发送AJAX请求 #

1. 开启Grid的多选模式 #

先给vaadin-grid加上multi-select属性，还可以加个选择列，让用户能直观勾选：

<vaadin-grid items="[[data]]" multi-select>
  <!-- 可选：添加自带的选择列，方便用户勾选 -->
  <vaadin-grid-selection-column auto-select></vaadin-grid-selection-column>
  
  <vaadin-grid-column>
    <template class="header">
      <h3>Favorite</h3>
    </template>
    <template>
      <!-- 可以加个按钮触发AJAX请求，或者用页面上的其他按钮 -->
      <paper-button on-tap="sendSelectedData">提交选中数据</paper-button>
    </template>
  </vaadin-grid-column>
</vaadin-grid>

2. 提取选中数据并发送请求 #

在你的JS代码里，直接通过Grid的selectedItems属性就能拿到所有选中的项，然后整理参数发AJAX就行：

sendSelectedData() {
  // 获取Grid实例
  const grid = this.shadowRoot.querySelector('vaadin-grid');
  // 拿到所有选中的数据
  const selectedItems = grid.selectedItems;
  
  // 把需要的字段整理成接口需要的格式
  const requestData = selectedItems.map(item => ({
    itemId: item.itemId,
    description: item.description
  }));
  
  // 用fetch发送POST请求（你也可以用axios之类的库）
  fetch('/your-api-url', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(requestData)
  })
  .then(res => res.json())
  .then(result => {
    console.log('请求成功:', result);
    // 这里写请求成功后的逻辑，比如提示用户
  })
  .catch(err => {
    console.error('请求出错:', err);
    // 处理错误情况
  });
}

3. 可选：实时监听选中变化 #

如果你需要实时知道用户选了哪些数据，可以给Grid加个selected-items-changed事件：

<vaadin-grid items="[[data]]" multi-select on-selected-items-changed="handleSelectionChange">
  <!-- 列定义 -->
</vaadin-grid>

对应的处理函数：

handleSelectionChange(e) {
  const selected = e.detail.value;
  console.log('当前选中了', selected.length, '条数据');
  // 比如在这里更新页面上的选中数量提示
}

这样既解决了之前data属性的问题，又能高效实现多选数据的提取和AJAX请求啦！

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