如何为Vuetify 2 v-simple-table渲染的<table>添加data-xx属性

方法1：轻量封装组件传递属性 #

不用完全重写默认插槽，只需要封装一个极简组件，把目标data属性直接绑定到内部的<table>上：

<template>
  <v-simple-table>
    <template v-slot:default="{ headers, items }">
      <table :data-qaid="dataQaid">
        <thead>
          <tr>
            <th v-for="header in headers" :key="header.text">{{ header.text }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in items" :key="item.id">
            <td v-for="header in headers" :key="header.value">{{ item[header.value] }}</td>
          </tr>
        </tbody>
      </table>
    </template>
  </v-simple-table>
</template>

<script>
export default {
  props: {
    dataQaid: String,
    headers: Array,
    items: Array
  }
}
</script>

使用时直接传递data-qaid和原有的headers、items即可，属性会直接挂载在<table>标签上，比完全重写插槽简洁得多。

方法2：自定义指令手动绑定 #

写一个全局或局部指令，在组件挂载后给内部的<table>添加目标data属性：

// 全局注册指令
Vue.directive('table-data-attr', {
  inserted(el, binding) {
    // 定位v-simple-table内部的table元素
    const table = el.querySelector('.v-simple-table table')
    if (table) {
      Object.keys(binding.value).forEach(key => {
        table.setAttribute(`data-${key}`, binding.value[key])
      })
    }
  }
})

使用v-simple-table时直接加指令：

<v-simple-table v-table-data-attr="{ qaid: 'results_available-panel' }">
  <!-- 原有表格内容 -->
</v-simple-table>

这种方式不需要修改原有组件结构，直接通过指令处理DOM。

方法3：组件内mounted钩子直接处理 #

如果只是单个组件使用，直接在当前组件的mounted钩子中操作DOM：

<template>
  <v-simple-table ref="simpleTable">
    <!-- 原有表格内容 -->
  </v-simple-table>
</template>

<script>
export default {
  mounted() {
    const table = this.$refs.simpleTable.$el.querySelector('.v-simple-table table')
    if (table) {
      table.setAttribute('data-qaid', 'results_available-panel')
    }
  }
}
</script>

这种方式最直接，适合仅在少数场景使用的情况。

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