在Vuetify的VItem插槽元素中使用v-ripple出现显示异常的解决方法

问题描述 #

给Vuetify的VDataTable每一行添加v-ripple波纹效果，将v-ripple指令应用在VItem包裹的<tr>元素上，同时通过isSelected为选中行设置红色背景色。但点击行时波纹显示异常，移除style中的isSelected绑定后，波纹显示恢复正常。

原代码 #

HTML #

<v-item-group v-model="model">
  <v-data-table :items="items">
    <template #item="{ item }">
      <v-item #="{ toggle, isSelected }">
        <tr
          v-ripple
          :style="isSelected ? 'background-color: red' : ''"
          @click="toggle"
        >
          <td>{{ item.text }}</td>
        </tr>
      </v-item>
    </template>
  </v-data-table>
</v-item-group>

JavaScript #

import { ref } from 'vue'

const model = ref();
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(e => ({
  text: 'some text' + e,
}))

解决方案 #

方法1：使用CSS类替代行内样式 #

行内样式会干扰v-ripple生成的波纹元素层级，改用类名绑定选中状态：

<v-item-group v-model="model">
  <v-data-table :items="items">
    <template #item="{ item }">
      <v-item #="{ toggle, isSelected }">
        <tr
          v-ripple
          :class="{ 'selected-row': isSelected }"
          @click="toggle"
        >
          <td>{{ item.text }}</td>
        </tr>
      </v-item>
    </template>
  </v-data-table>
</v-item-group>

添加对应的CSS：

.selected-row {
  background-color: red;
}

方法2：将背景色下移到<td>元素 #

把背景色绑定到<td>上，让波纹保留在<tr>上，避免层级冲突：

<v-item-group v-model="model">
  <v-data-table :items="items">
    <template #item="{ item }">
      <v-item #="{ toggle, isSelected }">
        <tr v-ripple @click="toggle">
          <td :style="isSelected ? 'background-color: red' : ''">
            {{ item.text }}
          </td>
        </tr>
      </v-item>
    </template>
  </v-data-table>
</v-item-group>

问题原因 #

v-ripple会在目标元素内部生成一个绝对定位的波纹元素，直接给<tr>设置行内背景色时，<tr>的背景层级会覆盖波纹元素，导致波纹无法正常显示。改用类名或下移背景色到子元素，能避免层级冲突，让波纹正常渲染。

内容的提问来源于stack exchange，提问作者cubx