bootstraptable的选中一行事件慢于onclick事件

Question

就这样一开始选定的是第三项，然后
这时候点击第四项的修改按钮时
获取的还是第三项的值
也就是修改的click事件快于bootstraptable的选定一项事件，这个怎么搞？

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要解决这个问题，你可以尝试以下几种方法：

方法一：使用onchange属性绑定表行更改事件。这将确保每次选择新的行时都会触发相应的事件。

<template>
  <div>
    <div id="app">
      <BootstrapTable
        :key="id"
        :data="data"
        @change="handleRowChange"
      />
    </div>
  </div>
</template>

<script>
import { BootstrapTable, TableColumn } from "bootstrap-table";
export default {
  components: {
    BootstrapTable,
    TableColumn
  },
  data() {
    return {
      data: [
        { id: 1, name: "第一行" },
        { id: 2, name: "第二行" },
        { id: 3, name: "第三行" }
      ]
    };
  },
  methods: {
    handleRowChange(data) {
      console.log("selected row", data.id);
    }
  }
};
</script>

在这个例子中，我们为每行添加了一个@change事件处理器，当用户在表中选择行时，它会被调用。注意，我们在处理函数中获取到的data.id是当前行的ID，并非你想要的data[0].name。

方法二：可以考虑使用change事件。这是BootstrapTable默认提供的一个事件，用于处理数据变更（例如列排序、过滤等）。

<template>
  <div>
    <div id="app">
      <BootstrapTable
        :key="id"
        :data="data"
        @change="handleChange"
      />
    </div>
  </div>
</template>

<script>
import { BootstrapTable, TableColumn } from "bootstrap-table";
export default {
  components: {
    BootstrapTable,
    TableColumn
  },
  data() {
    return {
      data: [
        { id: 1, name: "第一行" },
        { id: 2, name: "第二行" },
        { id: 3, name: "第三行" }
      ]
    };
  },
  methods: {
    handleChange(row) {
      console.log("selected row", row.name);
    }
  }
};
</script>

在这个例子中，我们为每个行添加了一个@change事件处理器，每当行发生改变时，它就会被调用。同样地，我们获取的row.name也是你需要的值。

以上两种方法都可以解决你的问题，根据你的具体需求和场景选择合适的方法。