Vuetify v-simple-table 突出显示选定行答案

【问题标题】：Vuetify v-simple-table Highlight Selected RowVuetify v-simple-table 突出显示选定行
【发布时间】：2020-11-11 21:04:36
【问题描述】：

一直在阅读 Vutify 中有关其 v-simple-table 和 v-data-table 的文档，我试图弄清楚是否有一种方法可以像为 v-data-table 一样添加行突出显示。

这样？

Vuetify - How to highlight row on click in v-data-table

我的表体是这样的：

<v-simple-table dense fixed-header height="90vh" >
            <template v-slot:default>
              <thead >
              <tr >
                <th style="font-size: 16px;height: 40px;" width='4%' class="black--text">
                  Location
                </th>
                <template v-if="Object.keys(arrAvailableDates).length">
                  <th style="font-size: 17px; " class="text-center black--text" v-for="(strDate, intIndex) in arrAvailableDates" :key="intIndex">
                    <span> {{ $moment(strDate).format('D MMM (ddd)') }}</span>
                    <v-badge  tile v-if="total[strDate] > 0" inline color="green" v-bind:content="total[strDate]" > </v-badge>
                  </th>
                </template>
                <template v-else>
                  <th class="text-center" v-for="intHeaderCounter in 6" :key="intHeaderCounter">
                    <v-skeleton-loader
                      :key="intHeaderCounter"
                      type='text'
                    ></v-skeleton-loader>
                  </th>
                </template>

              </tr>
              </thead>

    <tbody v-if="!blnLoading">
                  <template v-if="Object.keys(arrFiltered).length" >
                    <tr class="teal lighten-5"
                        v-for="(arrData, strLocationName) in arrFiltered"
                        :key="'f-' + strLocationName"
    
                    >
                      <th class="black--text text-darken--3">
                        {{ strLocationName }} <br/><span class="caption">{{arrData['zip']}}</span>
                      </th>
    
                      <template v-for="(arrAppointmentData, strDate) in arrData['appointment']">
                        <td :key="strDate" class="text-center ma-0 pa-0" >
                          <template v-if="typeof(arrAppointmentData) == 'object' ">
                              <span class="time-slot-x-small" v-for='(intCount, intIndex) in arrAppointmentData' :key="intIndex">
                                  {{ $moment(intIndex, ["HH:mm:ss"]).format('hh:mma')}}
                                  <span class="dot">{{intCount}}</span>
                                </span>
                          </template>
                          <template v-else>
                            -
                          </template>
                        </td>
    
                      </template>
                    </tr>
                  </template>

我可以悬停一行，它会显示该行已悬停，但我正在尝试创建一种方式，如果我单击该行，它会在选择时更改背景颜色。

我试图镜像的一个例子是这样的，但有一个简单的表： https://www.codeply.com/p/hi40H9aug9

【问题讨论】：

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

这是一个更以 Vue 为中心的方法...

模板：

   <tbody>
        <tr
          v-for="(item,idx) in items"
          :key="item.name"
          @click="handleClick(idx)"
          :class="{ selected: selected.includes(idx) }"
        >
          <td>{{ item.name }}</td>
          <td>{{ item.calories }}</td>
        </tr>
   </tbody>

脚本：

  data () {
    return {
      items: [
        {
          id: 1,
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: "1%",
        },
      ],
      selected: [],
    }
  },
  methods: {
    handleClick(i) {
        let pos = this.selected.indexOf(i)
        if (pos > -1) {
            this.selected.splice(pos, 1);   
        }
        else {
            this.selected.push(i)
        }
    },
  }

https://codeply.com/p/PaV3dwWk1j

【讨论】：