Vue+ELement UI el-table移入或选中某行时改变颜色

起因

出库按钮 置灰时,鼠标移入到表格的某行时,行背景颜色按钮背景颜色会被覆盖住

最初颜色

在这里插入图片描述

实现效果

修改行背景颜色
在这里插入图片描述

 
<style>
   /* 用来设置当前页面element全局table 选中某行时的背景色*/
  .el-table__body tr.current-row>td{
    background-color: #92cbf1!important;
     color: #fff;
  }
 
/*鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
   background-color: #454545 !important;
   /* color: #fff; */
}
</style>
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这个问题我可以回答。首先,我们需要在后端使用Spring Boot进数据的处理和接口的实现,然后在前端使用Vue框架进页面的展示和数据的渲染。具体实现步骤如下: 1. 后端实现 首先,在后端我们需要使用Spring Boot框架进数据的处理和接口的实现。我们可以使用MyBatis或者Hibernate等ORM框架来进数据库的操作。在接口实现中,我们需要将查询到的数据以JSON格式返回给前端。例如: ```java @RestController @RequestMapping("/api") public class UserController { @Autowired private UserService userService; @GetMapping("/users") public List<User> getUsers() { return userService.getUsers(); } } ``` 其中,`userService.getUsers()`方法返回的是一个List<User>类型的数据,即查询到的所有用户数据。 2. 前端实现 接下来,在前端我们需要使用Vue框架进页面的展示和数据的渲染。我们可以使用element-ui组件库中的el-table组件来展示数据。具体实现步骤如下: (1) 安装element-ui组件库 使用npm命令安装element-ui组件库: ``` npm install element-ui --save ``` (2) 在Vue组件中引入el-table组件 在Vue组件中引入el-table组件,并使用axios库从后端接口获取数据。例如: ```vue <template> <div> <el-table :data="users"> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> </div> </template> <script> import axios from 'axios'; export default { data() { return { users: [] } }, mounted() { axios.get('/api/users').then(response => { this.users = response.data; }); } } </script> ``` 其中,`:data="users"`绑定了数据源,`el-table-column`定义了要展示的列。在`mounted()`方法中使用axios库从后端接口获取数据,并将数据赋值给`users`变量。 至此,我们就完成了基于Spring Boot和Vueel-table数据展示功能的实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值