Question

在阅读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

Answer 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

Answer 2

我想这就是这么简单。

    <tr onclick="let s = this.parentNode.querySelector('tr.selected'); 
s && s.classList.remove('selected'); this.classList.add('selected'); "
     >

Vuetify v-simple-table高亮显示所选行

2 个答案: