带有信息的Vue js表格行答案

【问题标题】：Vue js table row with info带有信息的Vue js表格行
【发布时间】：2020-10-08 02:31:55
【问题描述】：

我想在单击表格中的行时查看信息。我试过@click，router:to，但没有帮助。也许我应该尝试制作列表项而不是数据表？

html代码：

<v-data-table  v-scroll:#scroll-target="onScroll"
  :items-per-page="-1"
  hide-default-footer
  dense
  :headers="headers"
  :items="companies"
  item-key="name"
  class="elevation-1"
></v-data-table>

Vue 代码如下：

<script>
   export default {
    data: () => ({
companies: [
  {
    name: "Company",
    status: "Active"
  },
  {
    name: "Company2",
    status: "Active"
  },
  {
    name: "Company3",
    status: "Active"
  },  
 ],
     headers: [
  {
    text: "Company name",
    align: "start",
    sortable: false,
    value: "name"
             },
  { text: "Status", value: "status" }
],
methods: {
  onScroll (e) {
    this.companies = e.target.scrollTop
  },
}
})
};
 </script>

我正在使用 vuetify 库。也许这是 vuetify 的问题，它有不同的命令在数据表中创建可点击行？

【问题讨论】：

I want to see information when I click to row in the table...什么信息？在哪里？
任何信息。例如，只是表格右侧的简单文本
你希望它显示在哪里？
抱歉回答太长了。数据表的权利

标签： html vue.js vuetify.js

【解决方案1】：

查看 vuetify 数据表事件：https://vuetifyjs.com/en/components/data-tables/

第一个是click:row。

所以你会有类似的东西：

// template
<v-data-table @click:row="rowClicked"></v-data-table>

// script
export default {
    methods: {
        rowClicked (item) {
            // show something or do your router stuff here
        }
    }
}

希望对您有所帮助。

【讨论】：