问题:table点击行的时候跳转到详情页面,但是复制行内数据的时候不进行跳转
解决方法:
使用 window.getSelection() 方法,返回一个Selection对象,表示用户选择的文本范围或光标的当前位置。其中有个toString 属性,返回的是当前选区的纯文本内容。代码如下:
<template>
<div class="pageContent">
<div class="pageTable">
<el-table :data="productTableData" style="width:100%" @cell-click="toProductDetails">
<el-table-column type="selection" width="80" align="center"/>
<el-table-column prop="name" label="产品名称" align="center"/>
</el-table>
</div>
</div>
</template>
<script lang="ts">
import router from '@/router'
import { defineComponent } from 'vue'
export default defineComponent({
name: "product",
setup() {
// 获取产品数据
let productTableData = [
{
id:1,
name:'测试产品'
}
]
// 跳转到详情页面
const toProductDetails = (row:{id:string,[propName:string]:any}) => {
//(window.getSelection() as Selection).toString() 的值如果为空,就表示没有选中,如果有选中这个值就是选中的数据
if((window.getSelection() as Selection).toString() === ''){
router.push({ path: "/productDetail", query: { id: row.id } });
}
};
return {
productTableData,
toProductDetails,
};
}
})
</script>