avue-crud 给table的row设置样式

Love The Way You Lie 2024-04-17 22:30 57阅读 0赞

最近使用avue 开发前端，遇到了一个问题，给表格的row加样式，看了avue的官方文档，发现确实能解决我的问题，于是我照着官方文档的方式写进了我的代码中，官方文档是这样的：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][2019090213400339.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70 1]

但是当我在控制台打印的时候，却不进入这个方法，代码是一模一样的（如果此时此刻你的代码，运行结果是好使的，请联系我，给我解决一下），反正最后我也没解决；不过，换一种方式解决呢，avue无非就是对elementUI的二次封装，可以尝试用一下elementui 中的方法解决，好样的，我试了一下，果然好使，上代码给大家伙看一下：  
![在这里插入图片描述][20190902134515539.png]  
就是给avue-crud 加row-class-name 如果是单元格的话 可以使用 cell-class-name ,这时候就看看我的方法：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70 2]

样式如下：  
![在这里插入图片描述][20190902135012742.png]

这样这个问题就解决啦，给大家看一下效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70 3]

对付看一下啦！ 总之问题解决啦，哈哈! 如果有第一种方式弄出来的，一定告诉我呦！！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/bfc3de835f9648ae80d75108ab196166.png
[2019090213400339.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d443568097ed43b6b22b3d1867913e7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a1c3d63f095245f6920cba5616659232.png
[20190902134515539.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4dc0453a50ca4faab491253c6e4c5359.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/6300da0fbb2f4af5b07ef32f582c8c4d.png
[20190902135012742.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/556f897a166b49618648d28c4db63096.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjc3NTExNQ_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/93bd367aee44457c8199a3ae039e2ee3.png