Vue Element-UI Table单击某个一行改变其背景颜色

最新推荐文章于 2024-09-12 18:09:35 发布

置顶

太阳姐姐

最新推荐文章于 2024-09-12 18:09:35 发布

阅读量4.6k

点赞数 2

文章标签： vue element-ui table

本文链接：https://blog.csdn.net/weixin_45502613/article/details/103494699

版权

本文介绍了如何在Vue项目中使用Element-UI的Table组件，通过开启highlight-current-row属性并自定义高亮样式，实现单击表格行时背景颜色变化的效果。

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

1、先开启element的高亮选项
开启 highlight-current-row

        <el-table
            id="exprotTable"
            border
            stripe
            highlight-current-row
            v-loading="loading"
            :max-height="tableHeight"
            :data="dataList"
            @select

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

太阳姐姐

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

【ElementUI样式优化1】el-table 修改斑马格样式、修改滚动条样式、添加表头边框、删除表格边框划线

Sabrina_cc的博客

04-25

2万+

【ElementUI样式优化1】el-table 修改斑马格样式、修改滚动条样式、添加表头边框、删除表格边框划线

Vue Element-UI Table点击某一行，将该行背景色改变高亮点击的行

Lemontree_fu的博客

11-04

1845

想要实现一个点击一行，改行的背景色改变，高亮，如下图所示 1、先开启element的高亮选项 <el-table :data="page_datas" border stripe highlight-current-row # 开启element table 行高亮选项 style="width: 100%"> <el-...

参与评论您还未登录，请先登录后发表或查看评论

Vue Element-UI Table点击某一行，将该行背景色改变高亮点击的行

haeasringnar的博客

04-11

1万+

1、先开启element的高亮选项开启 highlight-current-row <el-table :data="page_datas" border stripe highlight-current-row # 开启element table 行高亮选项 style="width: 100%"> <el-table-col...

实现 Element UI 中点击对应行高亮并定位到该行位置

热门推荐

悦度空间

06-18

2万+

vue+element-ui实现表格编辑的三种实现方式

10-17

在使用Vue.js框架结合Element UI组件库开发Web应用时，表格编辑功能的实现是经常遇到的需求之一。本文介绍了使用vue与element-ui实现表格编辑的三种不同方式，具体包括表格内部显示和编辑切换、通过弹出另外的表格...

vue element-ui el-table表格中鼠标单击事件与双击事件的绑定

weixin_45502613的博客

05-06

5708

<template> <el-table :data="tableData" style="width: 100%" @row-click="handleclick" @row-dblclick="handledbClick"> <el-table-column prop="name" label="姓名"> </el-table-column...

vue element-ui el-table点击行选中复选框上一个被点击得复选框取消选中

fdksfskldfdslkfs的博客

03-15

2080

2.拿到复选框选中状态的长度并且上一个选中的id和当前选中的id不相等来判断(两个id不相等代表第二次点击选中不同的复选框)toggleRowSelection多选表格参数1是选中的值参数2为true则不可以取消选中。满足条件则清除上一个复选框在重新给当前点击的行一个选中状态。1.首先给table绑定ref和row-click事件。clearSelection清空用户的选择。...

element ui el-table 动态改变单元格的颜色.txt

11-11

element ui el-table 动态改变单元格的颜色, 将el-table 包在自定义组件（page_table）里面，可以重复使用。

Element UI Table表格样式调整

小白的成长历程

03-21

725

element ui调整table样式

Vue Element Ui中 Table 表格更改某一列的样式，比如说背景色

weixin_43835827的博客

10-22

1万+

先在Table 表格上加上属性 <el-table :data="tableList" border :cell-style="columnStyle"> <el-table-column type="index" label="第一列" width="50px"></el-table-column> <el-table-column type="index" label="第二列" width="50px">&lt

element-ui table 点击某行（修改该行背景色）

nishiweiyj的博客

05-31

2749

<template> <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @row-click="rowClick" :row-style="selectedstyle" > <el-table-column prop="date" label="日期" width="180"> </el-ta.

Vue+element-ui 使用row-class-name修改el-table某一行解决背景色无效

weixin_43633329的博客

03-06

6859

项目场景：要实现这样的一个功能：为列表特定某一行的背景高亮，如下图，实现某一行的权限字段是超级，那么这行就高亮显示的效果问题描述：根据element-ui中el-table中的row-class-name 属性设置可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。官方文档效果图：根据element-ui中el-table中的row-class-name 属性设置 <template>

element-UI Table组件样式修改记录

池海

01-07

1036

最近在自己瞎玩的过程中想修改一下element Table组件样式，起初使用了很多种方法都没有达到想要的效果。后来看官方文档发现，ele已经给我们预留了很多修改样式的属性接口。我们只需要绑定对应的样式就可以满足大多数的样式需求。！！！汗颜自己没好好把官方文档看一下，没办法看到密密麻麻的字就头疼。这篇文章就留着单独记录Table组件的内容，以后有什么值得记录的新内容都会来补充。表格背景样式修改 ...

element表格el-table的指定行背景颜色修改

weixin_43923808的博客

08-15

6924

这里是将数据里name=部门达标情况的设置背景颜色为灰色。这里样式很重要,没有scoped。

[element-ui] el-table行添加阴影悬浮效果

qq_14993591的博客

04-03

1500

我的项目中，对tr上下有border，左右无border，本来想把上下的阴影也放到tr内，但发现上下在border影响下视觉会有一种上下内阴影的效果，所以after的高度还采用和tr高度一致，仅对左右进行处理。将after宽度预留出左+右阴影区域宽度，并向左偏移一点距离，这样就能将原先遮挡的左右阴影显示出来（设计图对el-table行左右两端无border情况下效果更佳）每行左右两边的阴影被遮挡，毕竟tr有tbody\table等父元素，被遮挡没有直接的解决办法。，设置弹出气泡的风格，默认。

在vue和element-ui的table中实现分页复选功能

09-02

在Vue和Element UI的Table组件中实现分页复选功能，可以按照以下步骤进行操作： 1. 在Vue组件中引入Element UI的Table和Checkbox组件： ```javascript import { Table, Checkbox } from 'element-ui'; ``` 2. 在data中定义需要用到的变量： ```javascript data() { return { // 表格数据 tableData: [], // 选中的行数据 selectedRows: [], // 是否全选 isAllSelected: false } } ``` 3. 在模板中使用Table和Checkbox组件，并设置相应属性和事件： ```html <template> <div> <el-table :data="tableData" @row-click="handleRowClick"> <el-table-column type="selection" width="55"> <template slot-scope="scope"> <el-checkbox v-model="selectedRows" :label="scope.row" @change="handleCheckboxChange"></el-checkbox> </template> </el-table-column>  </el-table> </div> </template> ``` 4. 在methods中定义事件处理函数： ```javascript methods: { // 单击行选中/取消选中 handleRowClick(row) { const index = this.selectedRows.indexOf(row); if (index > -1) { this.selectedRows.splice(index, 1); } else { this.selectedRows.push(row); } }, // 全选/取消全选 handleCheckboxChange(value) { if (value.length === this.tableData.length) { this.isAllSelected = true; } else { this.isAllSelected = false; } } } ``` 5. 在模板中使用全选Checkbox，并绑定isAllSelected属性： ```html <el-checkbox v-model="isAllSelected" @change="handleSelectAllChange">全选</el-checkbox> ``` 6. 在methods中定义全选Checkbox的 change 事件： ```javascript methods: { // 全选/取消全选 handleSelectAllChange(value) { if (value) { this.selectedRows = [...this.tableData]; } else { this.selectedRows = []; } } } ``` 以上就是在Vue和Element UI的Table中实现分页复选功能的步骤。通过监听行点击事件，可以实现点击行选中/取消选中的功能；通过绑定Checkbox的v-model和change事件，可以实现全选功能；通过管理选中的行数据，可以获取用户选择的数据。