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)
      }
    }
  }
}

猜你喜欢

转载自blog.csdn.net/weixin_35773751/article/details/124308468
今日推荐