elementUI表格 table怎样自定义列单元格的内容一列放多列的字段

迈不过友情╰ 2024-04-18 19:32 32阅读 0赞

## 按照elementUI官网的代码看，得出最普通的样式是这样 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70 1][]

## 如果想要给列表的内容添加一些自定义内容，那就需要slot-scope了   如图所示   scope.row就包含了每行的对应字段   通过这个row取出里面的值即可 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70 3][]

## 更多内容可以去elementUI官网复制粘贴然后修改，多思考，多看文档 ##

## [https://element.eleme.io/\#/zh-CN/component/table][https_element.eleme.io_zh-CN_component_table] ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/bed26162965c4444b9a36965da34a1c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5befdd265b1843ee922f4d266223628c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/6cf688e7d8684803a8a624f9923ec7b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/11403701d4c242c5a736be3874f54060.png
[https_element.eleme.io_zh-CN_component_table]: https://element.eleme.io/#/zh-CN/component/table