Naive ui 表格点击行跳转

最新推荐文章于 2024-10-16 10:59:07 发布

原创最新推荐文章于 2024-10-16 10:59:07 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

这篇博客介绍了如何在Vue.js应用中使用n-data-table组件来创建远程数据加载的表格，并配置了行点击事件监听。通过设置`:columns`、`:data`、`:pagination`等属性，实现了表格数据的展示和分页功能。同时，通过`rowProps`方法定义了行的样式和点击事件处理，展示了如何获取并打印msgId。

在这里插入图片描述

<n-data-table
  ref="table"
  remote
  :columns="columns"
  :data="listData"
  :pagination="pagination"
  :row-key="row => row.msgId"
  :row-props="rowProps"
  @update:page-size="updatePageSize"
  @update:page="updatePage"
 />
 //-----------------------------------------------------------
const rowProps = (row: { msgId: string }) => {
  return {
    style: 'cursor: pointer;',
    onClick: () => {
    	console.log(row.msgId)
    }
  }
}