Vue table行事件在选中内容时不进行触发

前言:最近项目中使用了element table 里面的row-click 方法,导致用户在选中内容时也会触发事件,影响用户体验,需要优化成在用户选中内容时不进行触发。

实现要点

window.getSelection().toString()

实例代码:

<template>
  <div class="hello">
    <el-table @row-click="click"
              :data="tableData"
              style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

export default {
  name: 'HelloWorld',
  data () {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },
  methods: {
    click (row) {
      if (window.getSelection().toString() === '') {
        console.log(row)
      }
    }
  }
}
posted @ 2022-12-06 22:18  轻风细雨_林木木  阅读(138)  评论(0编辑  收藏  举报