Vue.js Bootstrap Vue 表格: 点击行时显示详情

在本文中，我们将介绍如何使用Vue.js和Bootstrap Vue来创建一个可展示详细信息的表格。我们将使用Bootstrap Vue提供的表格组件，并通过点击行来展示相关的详细数据。

步骤一：安装和引入依赖

首先，我们需要安装Vue.js和Bootstrap Vue。在终端中运行以下命令来安装它们：

npm install vue bootstrap-vue

然后，我们需要在项目中引入这些依赖。我们可以在main.js文件中添加以下代码来实现：

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

步骤二：创建表格组件

接下来，我们将创建一个Vue组件来展示表格。在你喜欢的地方创建一个Table.vue文件，并添加以下代码：

<template>
  <div>
    <b-table striped hover :items="tableData" @row-clicked="showDetails"></b-table>
    <b-modal v-if="selectedRow" @hidden="clearSelectedRow">
      <h3>详细信息</h3>
      <ul>
        <li>姓名：{{ selectedRow.name }}</li>
        <li>年龄：{{ selectedRow.age }}</li>
        <li>地址：{{ selectedRow.address }}</li>
      </ul>
    </b-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, address: '北京市' },
        { name: '李四', age: 25, address: '上海市' },
        { name: '王五', age: 30, address: '广州市' },
        { name: '赵六', age: 35, address: '深圳市' }
      ],
      selectedRow: null
    }
  },
  methods: {
    showDetails(row) {
      this.selectedRow = row
    },
    clearSelectedRow() {
      this.selectedRow = null
    }
  }
}
</script>

在上面的代码中，我们使用了b-table和b-modal组件来创建表格和展示详细信息的弹窗。当用户点击表格的行时，我们将设置selectedRow为选中的行数据，并显示一个包含详细信息的弹窗。

步骤三：使用表格组件

现在我们可以在另一个页面或组件中使用我们刚刚创建的表格组件了。假设我们有一个名为App.vue的根组件，我们可以在该组件的模板中添加以下代码：

<template>
  <div>
    <h1>学生列表</h1>
    <Table></Table>
  </div>
</template>

<script>
import Table from './Table.vue'

export default {
  components: {
    Table
  }
}
</script>

在上面的代码中，我们通过import导入了刚刚创建的表格组件，并在模板中使用了<Table></Table>来展示它。