FastAdmin 中 Bootstrap-Table 列宽控制

最新推荐文章于 2025-03-09 06:42:09 发布

chinaorient

最新推荐文章于 2025-03-09 06:42:09 发布

阅读量3.6k

点赞数

分类专栏： fastadmin 组件

本文链接：https://blog.youkuaiyun.com/chinaorient/article/details/104228278

版权

fastadmin 同时被 2 个专栏收录

5 篇文章

订阅专栏

组件

5 篇文章

订阅专栏

本文介绍如何使用Bootstrap Table处理长信息显示问题，通过CSS控制和formatter处理实现信息过长时的省略显示，并在悬停时展示完整内容，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、实现的功能

                        // {field: 'shiti.content', title: __('试题内容'),
                        //         formatter:function(value,row,index){
                        //                   value = value?value:'';
                        //                   var length = value.length;
                        //                   if(length&&length>35){length = 35;}
                        //                   return"<span title ='"+value+"'>"+value.substring(0,length)+"</span>"
                        //                      }
                        // },
                        {field: 'shiti.content', title: __('试题内容'),
                                formatter:Table.api.formatter.content
                        },
                        // {field: 'shiti.content', title: __('试题内容'),
                        //         cellStyle:function (value, row, index) {
                        //                         return {
                        //                             css: {
                        //                                 "min-width": "100px",
                        //                                 "white-space": "nowrap",
                        //                                 "text-overflow": "ellipsis",
                        //                                 "overflow": "hidden",
                        //                                 "max-width": "400px"
                        //                             }
                        //                         }
                        //                     }
                        // },
                        // {field: 'shiti.content', title: __('试题内容'),
                        //         cellStyle:  {css: {
                        //                                 "min-width": "100px",
                        //                                 "white-space": "nowrap",
                        //                                 "text-overflow": "ellipsis",
                        //                                 "overflow": "hidden",
                        //                                 "max-width": "400px"
                        //                             }
                        //                     }
                        // },