element-ui table组件点击任意行位置触发该行选中

最新推荐文章于 2024-05-14 11:44:37 发布

纳尼亚awsl

最新推荐文章于 2024-05-14 11:44:37 发布

阅读量1.3k

点赞数 1

分类专栏： vue JS学习笔记文章标签： javascript elementui

本文链接：https://blog.csdn.net/heal_l/article/details/125429580

版权

本文介绍了如何在Element UI的table组件中，通过监听row-click事件并触发handleRowClick方法，实现点击行任意位置时选中行的效果。同时，鼠标悬浮时背景色变化，点击文件名可预览或查看文件内容。

摘要由CSDN通过智能技术生成

需求如上图：

鼠标悬浮背景色改变，选中框显示，点击名字可跳转预览文件、或查看文件夹内容，点击其余行内任意位置则触发选中

JSX结构代码：

<el-table
            ref='multipleTable'
            data={this.fileList}
            header-cell-style={
  { color: '#566B8B', fontSize: '12px' }}
            style="width: 100%"
            header-cell-class-name="header"
            on-row-click={this.handleRowClick}
            on-selection-change={this.handleSelectionChange}
            row-class-name={this.getClassName}
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              prop="name"