bootstrap-table新版的列太长自动隐藏及滑动显示

先看效果

image.png image.png

在需要隐藏及显示的列设置加上

{
            "field": "advice",
            "title": "SQL优化建议",
            "cellStyle": "colStyle",
            "formatter": "hoverShow",
        },

js 加上相应的函数

//td宽度以及内容超过宽度隐藏
   function colStyle(value, row, index) {
        return {
            css: {
                "white-space": "nowrap",
                "text-overflow": "ellipsis",
                "overflow": "hidden",
                "max-width": "60px"
            }
        }
   };


   //表格超出宽度鼠标悬停显示td内容
   function hoverShow(value, row, index) {
        var span = document.createElement("span");
        span.setAttribute("title", value);
        span.innerHTML = value;
        return span.outerHTML;
   };