如何避免v-data-table行内选中文本时触发click:row事件

在v-data-table行内选中文本时，click:row事件会被触发，是否有方法可以阻止该行为？

• 复现操作：选中表格内任意值，观察控制台输出即可复现问题。

下面提供两种可行的实现方案，可根据业务场景选择：

方案1：回调内加选中判定（改造成本最低） #

直接在click:row的绑定回调中判断当前是否存在选中的文本，存在则直接跳过业务逻辑即可：

// 原click:row绑定的回调函数
onRowClick () {
  // 获取页面选中的文本内容
  const selectedText = window.getSelection().toString()
  // 有选中内容说明是文本选择操作，不执行业务逻辑
  if (selectedText.length) return
  // 原有行点击的业务逻辑写在下方
  console.log('仅正常点击行才会触发')
}

该方案不需要修改组件的插槽或原有配置，90%以上的场景都可以覆盖。

方案2：自定义行元素监听拖拽行为（更严谨） #

如果需要完全避免误触发，还可以通过v-data-table的item插槽自定义行结构，通过判断鼠标按下和松开的坐标差来区分是点击还是拖拽选文本：

<template>
  <v-data-table :headers="headers" :items="tableData">
    <template #item="{ item }">
      <tr 
        @mousedown="recordMousePos" 
        @mouseup="e => handleRowClick(e, item)"
      >
        <!-- 自行实现每列的渲染逻辑，和原有表格保持一致即可 -->
        <td v-for="header in headers" :key="header.value">
          {{ item[header.value] }}
        </td>
      </tr>
    </template>
  </v-data-table>
</template>
<script>
export default {
  data () {
    return {
      mouseDownX: 0,
      mouseDownY: 0
    }
  },
  methods: {
    recordMousePos (e) {
      this.mouseDownX = e.clientX
      this.mouseDownY = e.clientY
    },
    handleRowClick (e, rowData) {
      const diffX = Math.abs(e.clientX - this.mouseDownX)
      const diffY = Math.abs(e.clientY - this.mouseDownY)
      // 坐标差超过3px判定为拖拽选中文本，不执行业务逻辑
      if (diffX > 3 || diffY > 3) return
      // 原有行点击的业务逻辑
      console.log('行点击触发', rowData)
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者studio-pj