求Vue.js 2中点击DataTables选中行获取单行数据的示例

没问题，我给你整理了一个直接可用的小示例，核心就是给DataTable组件绑定行点击事件，然后在事件处理函数里拿到选中的那一行数据。

完整代码示例 #

模板部分 #

<template>
  <div class="table-responsive">
    <!-- 绑定行点击事件到handleRowClick方法 -->
    <datatable 
      title="" 
      :rows="tableData" 
      :columns="columns" 
      :options="options"
      @row-click="handleRowClick"
    ></datatable>
  </div>
</template>

JavaScript部分 #

export default {
  data() {
    return {
      columns: ['id', 'name', 'age'],
      tableData: [
        { id: 1, name: "John", age: "20" },
        { id: 2, name: "Jane", age: "24" },
        { id: 3, name: "Susan", age: "16" },
        { id: 4, name: "Chris", age: "55" },
        { id: 5, name: "Dan", age: "40" }
      ],
      options: {
        // 这里可以添加你的DataTable配置，比如分页、排序等
        paging: true,
        searching: true
      },
      selectedRow: null // 用来存储选中的行数据
    }
  },
  methods: {
    handleRowClick(rowData) {
      // 这里拿到点击的行数据，你可以做任何操作
      this.selectedRow = rowData;
      console.log('选中的行数据:', rowData);
      // 比如弹窗展示、发送请求到后端等等
    }
  }
}

关键说明 #

• 注意事件名：不同的Vue DataTable组件，行点击事件的名称可能不一样，比如有的组件叫@click-row或者@row-selected，如果上面的@row-click不生效，你可以去查一下你用的组件的官方文档找对应的事件名。
• handleRowClick函数的参数就是当前点击行的完整数据对象，直接用就行。
• 我在data里加了selectedRow变量，用来存储选中的行数据，方便你在模板里展示或者后续使用。

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