【 想手写非常麻烦!!!!】
【按照官方给的方法,row那一行。还必须放在非scoped里菜生效】
而且害得加.el-table .success-row
然后 stripe好像还会覆盖某个自定义样式。
以下为转载
在后台管理系统项目中,经常会使用element-ui中的组件el-table(表格)来展示列表数据。
当展示数据的时候,可能就需要给给某一行或者列设置特殊的样式,在查询文档是我遇到了一些问题:包括设置某一行或列样式的方式;包括设置指定类名后选择器无效问题。。。。
首先介绍一下,我的项目需求是列表中展示详细信息的一列,最多只展示两行数据,超出时使用...表示。
实现结果如下图所示:
![](https://img-blog.csdnimg.cn/img_convert/af3146b7d9ea5e4cebbbdf719a9a6f13.png)
下面介绍一下实现方式:
方法一(不推荐,复杂、而且表格稍有错位):
1.查阅element-ui官方文档后我们发现有如下属性:
![](https://img-blog.csdnimg.cn/img_convert/379584143a11697caa14b74c8355c54a.png)
2.为表格添加该属性,并指定函数名:
![](https://img-blog.csdnimg.cn/img_convert/beac3501bdcebc8d768337b79a12380d.png)
3.在methods中定义addClass方法,给“详细信息”列添加类名:
![](https://img-blog.csdnimg.cn/img_convert/3a309db4d7edbe6414d915627a4b739f.png)
4.在<style></style>中设置指定css样式:
![](https://img-blog.csdnimg.cn/img_convert/76d3b87a37760526f8d2445f22e42e8a.png)
在经过以上步骤后,本以为就应该是实现了需求,但是查看页面后发现,并没有成功!!!!!
![](https://img-blog.csdnimg.cn/img_convert/e0e8d92ae958afe27f190219a99989b2.png)
这时点开控制台发现,类名已经添加成功了,但是选择器样式却无效。。。。。。
![](https://img-blog.csdnimg.cn/img_convert/6149c2a543765b76eff6d431aa2cafef.png)
害我查了好久的资料o(╥﹏╥)o,才知道有以下解决办法——使用全局属性:
在elementUI中,row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class才能生效。因为之前的代码都是在组件中编写的,所以去除中的scoped即可该组件中的样式变为全局属性。
再看上面的代码,我将选择器定义在了局部:
![](https://img-blog.csdnimg.cn/img_convert/cf174a6f870511c1e0e9e2cbe098dce5.png)
5.修改为全局样式:
所以就再单独写一个<style></style>标签书写全局样式即可:
![](https://img-blog.csdnimg.cn/img_convert/f8557eb744590ac1141f39ab81072100.png)
至此,我们就实现了预期的效果:
![](%E5%9C%A8%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F%E9%A1%B9%E7%9B%AE%E4%B8%AD%EF%BC%8C%E7%BB%8F%E5%B8%B8%E4%BC%9A%E4%BD%BF%E7%94%A8element-ui%E4%B8%AD%E7%9A%84%E7%BB%84%E4%BB%B6el-table%EF%BC%88%E8%A1%A8%E6%A0%BC%EF%BC%89%E6%9D%A5%E5%B1%95%E7%A4%BA%E5%88%97%E8%A1%A8%E6%95%B0%E6%8D%AE%E3%80%82%20%20%E3%80%80%E3%80%80%E5%BD%93%E5%B1%95%E7%A4%BA%E6%95%B0%E6%8D%AE%E7%9A%84%E6%97%B6%E5%80%99%EF%BC%8C%E5%8F%AF%E8%83%BD%E5%B0%B1%E9%9C%80%E8%A6%81%E7%BB%99%E7%BB%99%E6%9F%90%E4%B8%80%E8%A1%8C%E6%88%96%E8%80%85%E5%88%97%E8%AE%BE%E7%BD%AE%E7%89%B9%E6%AE%8A%E7%9A%84%E6%A0%B7%E5%BC%8F%EF%BC%8C%E5%9C%A8%E6%9F%A5%E8%AF%A2%E6%96%87%E6%A1%A3%E6%98%AF%E6%88%91%E9%81%87%E5%88%B0%E4%BA%86%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98%EF%BC%9A%E5%8C%85%E6%8B%AC%E8%AE%BE%E7%BD%AE%E6%9F%90%E4%B8%80%E8%A1%8C%E6%88%96%E5%88%97%E6%A0%B7%E5%BC%8F%E7%9A%84%E6%96%B9%E5%BC%8F%EF%BC%9B%E5%8C%85%E6%8B%AC%E8%AE%BE%E7%BD%AE%E6%8C%87%E5%AE%9A%E7%B1%BB%E5%90%8D%E5%90%8E%E9%80%89%E6%8B%A9%E5%99%A8%E6%97%A0%E6%95%88%E9%97%AE%E9%A2%98%E3%80%82%E3%80%82%E3%80%82%E3%80%82%20%20%E3%80%80%E3%80%80%E9%A6%96%E5%85%88%E4%BB%8B%E7%BB%8D%E4%B8%80%E4%B8%8B%EF%BC%8C%E6%88%91%E7%9A%84%E9%A1%B9%E7%9B%AE%E9%9C%80%E6%B1%82%E6%98%AF%E5%88%97%E8%A1%A8%E4%B8%AD%E5%B1%95%E7%A4%BA%E8%AF%A6%E7%BB%86%E4%BF%A1%E6%81%AF%E7%9A%84%E4%B8%80%E5%88%97%EF%BC%8C%E6%9C%80%E5%A4%9A%E5%8F%AA%E5%B1%95%E7%A4%BA%E4%B8%A4%E8%A1%8C%E6%95%B0%E6%8D%AE%EF%BC%8C%E8%B6%85%E5%87%BA%E6%97%B6%E4%BD%BF%E7%94%A8...%E8%A1%A8%E7%A4%BA%E3%80%82%20%20%E3%80%80%E3%80%80%E5%AE%9E%E7%8E%B0%E7%BB%93%E6%9E%9C%E5%A6%82%E4%B8%8B%E5%9B%BE%E6%89%80%E7%A4%BA%EF%BC%9A%20%20%E3%80%80%E3%80%80%20%20%20%20%20%20%20%E3%80%80%E3%80%80%20%20%E3%80%80%E3%80%80%E4%B8%8B%E9%9D%A2%E4%BB%8B%E7%BB%8D%E4%B8%80%E4%B8%8B%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F%EF%BC%9A%20%20%20%20%20%E6%96%B9%E6%B3%95%E4%B8%80%EF%BC%88%E4%B8%8D%E6%8E%A8%E8%8D%90%EF%BC%8C%E5%A4%8D%E6%9D%82%E3%80%81%E8%80%8C%E4%B8%94%E8%A1%A8%E6%A0%BC%E7%A8%8D%E6%9C%89%E9%94%99%E4%BD%8D%EF%BC%89%EF%BC%9A%20%E3%80%80%E3%80%801.%E6%9F%A5%E9%98%85element-ui%E5%AE%98%E6%96%B9%E6%96%87%E6%A1%A3%E5%90%8E%E6%88%91%E4%BB%AC%E5%8F%91%E7%8E%B0%E6%9C%89%E5%A6%82%E4%B8%8B%E5%B1%9E%E6%80%A7%EF%BC%9A%20%E3%80%80%E3%80%80%20%20%20%E3%80%80%E3%80%802.%E4%B8%BA%E8%A1%A8%E6%A0%BC%E6%B7%BB%E5%8A%A0%E8%AF%A5%E5%B1%9E%E6%80%A7%EF%BC%8C%E5%B9%B6%E6%8C%87%E5%AE%9A%E5%87%BD%E6%95%B0%E5%90%8D%EF%BC%9A%20%E3%80%80%E3%80%80%20%20%20%E3%80%80%E3%80%803.%E5%9C%A8methods%E4%B8%AD%E5%AE%9A%E4%B9%89addClass%E6%96%B9%E6%B3%95%EF%BC%8C%E7%BB%99%E2%80%9C%E8%AF%A6%E7%BB%86%E4%BF%A1%E6%81%AF%E2%80%9D%E5%88%97%E6%B7%BB%E5%8A%A0%E7%B1%BB%E5%90%8D%EF%BC%9A%20%E3%80%80%E3%80%80%20%20%E3%80%80%E3%80%804.%E5%9C%A8)