在vuetify的v-data-table中如何将选中行值传给带参数的表格外按钮

问题根因 #

通过原生setAttribute修改onclick属性的方式无法作用于Vue的@click绑定事件，二者属于两套不同的事件机制，这种操作也不符合Vue数据驱动的开发逻辑。
你已经通过v-model="selected"绑定了表格的选中项，该变量会自动同步所有勾选的行数据，无需动态给按钮绑定参数，直接在点击函数中读取该变量即可。

修改后的代码实现 #

模板部分 #

<v-toolbar flat>
  <v-toolbar-title>Details</v-toolbar-title>
  <div style="width:100%">
    <v-col class="text-right">          
       <!-- 保留原有事件绑定即可，无需动态修改、无需提前传参 -->
       <v-btn id="btnCopy" @click="Redirect" class="black--text">COPY</v-btn>            
    </v-col>
  </div>
  <v-spacer></v-spacer>
</v-toolbar>
<v-data-table
  v-model="selected"
  :headers="headers"
  :items="plist"
  :single-select="singleSelect"
  item-key="revId"
  show-select
  class="elevation-1"
  :single-expand="singleExpand"
  :expanded.sync="expanded"
  show-expand
  :items-per-page.sync="itemsPerPage"
  :page.sync="page"
  :loading="loadTable"
  loading-text="Loading data....Please wait"
>

JS逻辑部分 #

// 不需要在选中时操作DOM修改按钮绑定，enterSelect如果没有其他逻辑可以直接删除
enterSelect(values) {
  // 若选中时需要做其他校验/处理可以在这里写，不需要操作按钮事件
},
Redirect() {
  // 单选场景下selected数组只有一个元素，直接读取即可
  if (this.selected.length) {
    const revId = this.selected[0].revId
    alert("Hello" + revId)
    // 多选场景需要获取所有选中项的revId，可使用：this.selected.map(item => item.revId)
  } else {
    alert("请先选中需要操作的行")
  }
}

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