VUE element-ui 之table表格复选框勾选行背景修改(选中状态背景色修改)

简介: VUE element-ui 之table表格复选框勾选行背景修改(选中状态背景色修改)

需求:鼠标悬停浅色背景,勾选复选框选中行深色背景
步骤:

<el-table
          id="excel_table"
          ref="table"
          class="order"
          border
          height="80vh"
          :summary-method="getSummaries"
          :show-summary="true"
          :data="Data"
          style="width: 100%"
          :header-cell-style="{background:'#eef1f6',color:'#333333'}"
          :row-style="rowClass" //行样式方法
          @sort-change="sortChange"
          @selection-change="selectionChangeHandler"
        >
data() {
    return{
        selectRow: [], // 存储选中row的唯一标识,如id
          multipleSelection: []// 存储选中的row
    }
},
watch: {
    multipleSelection(data) { // 监听选中状态
      this.selectRow = []
      if (data.length > 0) {
        data.forEach((item, index) => {
          this.selectRow.push(item.totalNum)
        })
      }
    }
  }
methods: {
    // 复选框勾选
    selectionChangeHandler(val) {
      console.log(val)
      if (val) {
        this.selections = val
        this.multipleSelection = val //将当前勾选的数据存储
        this.parameter = { price: val[0].price, saleOrderNum: val[0].sale_order_num, windowType: val[0].window_type }
      } else { this.selections = [] }
    },
    // 对所选行进行样式设置
    rowClass({ row, rowIndex }) {
      console.log(`---`, row)
      if (this.selectRow.includes(row.totalNum)) {
        return { 'background-color': '#9FBBFF' }
      }
    },
}
<style scoped>
  /deep/.order .el-table__header-wrapper  .el-checkbox{
    display:none
  }
/* 鼠标悬停背景色 */
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
   background: #D3DEF9;
 }
</style>

看效果:
在这里插入图片描述
亲测有效,单选全选都可以实现。

相关文章
|
5月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
6月前
|
JavaScript
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
332 49
|
5月前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
4月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
292 0
|
4月前
|
JavaScript 索引
vue 表格数据上下移动并增加背景色
vue 表格数据上下移动并增加背景色
58 0
|
6月前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
|
6月前
Vue3表格(Table)
这是一个基于 Vue2 的表格组件,支持自定义列配置、数据绑定、加载中提示、空状态提示及分页功能。主要属性包括表格列配置 `columns`、数据源 `dataSource`、加载状态 `loading` 及分页配置等。组件内置了 Spin、Empty 和 Pagination 等子组件以实现丰富的交互效果。通过简单的属性绑定即可实现数据展示、加载动画和无数据提示等功能。
182 0
Vue3表格(Table)
|
2天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
119 89
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
3月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
4月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
203 3