el-table点击某一行选中改变背景色且执行方法

依稀i123

已于 2024-02-02 16:12:09 修改

阅读量2.3k

点赞数 11

分类专栏： vue3 文章标签： elementui 前端 javascript

于 2024-02-02 16:10:57 首次发布

本文链接：https://blog.csdn.net/qq_59833893/article/details/135995784

版权

vue3 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章介绍了如何在ElementUI的表格组件中实现点击某一行时选中并改变背景色，通过`row-style`属性和`@row-click`事件处理器，以及`selectRow`方法来定制行的样式和行为。

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

elementUI table表格点击某一行选中并且改变背景色

使用:row-style="rowStyle"及@row-click=“selectRow”：
其中 selectRow 方法中：
row 输出：当前行的内容
在这里插入图片描述
column 输出：当前列的信息
event 输出：当前事件

<el-table
  style="width: 100%; border: 1px dashed rgba(128,128,128,0.57); border-top: 0px"
  height="520px"
  ref="table"
  :data="typeList"
  :row-style="rowStyle"
  @row-click="selectRow">
</el-table>

const selectRow = (row, column, event) => {
  name.value = row.name;  
  getContent(row.name)  // 每次点击了该行（该行任意位置、任意列）都进行执行该方法
}
// 点击后的效果（点击某一行选中并且改变背景色）
const rowStyle = ({row}) => {
  if (name.value === row.name) {
   return {
       'background-color': 'rgb(235,240,240)', cursor: 'pointer'
     }  
   }
   return {cursor: 'pointer'}
}