Vue js строка таблицы с информацией - PullRequest
Новая
       9

Vue js строка таблицы с информацией

1 голос
/ 18 июня 2020

Я хочу видеть информацию, когда нажимаю на строку в таблице. Я пробовал @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>

I я использую библиотеку vuetify. Может быть, это проблема vuetify, и у него есть другая команда для создания строки с щелчком в таблице данных?

1 Ответ

0 голосов
/ 18 июня 2020

Проверить события таблицы данных 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
        }
    }
}

Надеюсь, это поможет.

...