el-table-column 內(nèi)容不自動(dòng)換行的解決方法
場(chǎng)景
使用ElementUI中的Table 表格時(shí),如果列內(nèi)容超過(guò)列寬,會(huì)默認(rèn)換行,如下
這樣看起來(lái)不美觀,還有可能引起其它樣式問(wèn)題。那么如何解決呢?
方式一
使用Table組件自帶的show-overflow-tooltip
屬性
參數(shù)說(shuō)明類型可選值默認(rèn)值show-overflow-tooltip當(dāng)內(nèi)容過(guò)長(zhǎng)被隱藏時(shí)顯示 tooltipBoolean—false
添加該屬性之后,如果內(nèi)容超出列寬,超長(zhǎng)部分會(huì)默認(rèn)省略。當(dāng)鼠標(biāo)滑過(guò)該內(nèi)容時(shí),會(huì)彈出Tip
提示
<!--示例--> <el-table-column prop="departName" label="部門(mén)" show-overflow-tooltip > </el-table-column>
注:該屬性謹(jǐn)慎使用,如果多列使用且內(nèi)容較多時(shí),會(huì)影響頁(yè)面性能
方式二
計(jì)算每列最大寬度,使內(nèi)容不換行;配合設(shè)置最大字符長(zhǎng)度,可以解決大多數(shù)場(chǎng)景問(wèn)題。接下來(lái)展示最基礎(chǔ)的列寬計(jì)算方式
示例如下
/** * 使用span標(biāo)簽包裹內(nèi)容,然后計(jì)算span的寬度 width: px * @param valArr */ function getTextWidth(str) { let padding = 0;//單元格左右padding距離 let width = 0; let span = document.createElement('span'); span.innerText = str; span.className = 'getwidth'; document.querySelector('body').appendChild(span); // 這里可以獲取當(dāng)前單元格的font-size 以及 內(nèi)容的中英文、字母等 做更精確的計(jì)算 width = document.querySelector('.getwidth').offsetWidth+padding; document.querySelector('.getwidth').remove(); return width; } /** * 遍歷列的所有內(nèi)容,獲取最寬一列的寬度 * @param {Array} arr 需要計(jì)算的數(shù)據(jù) * @param {Number} minwidth 列最小寬度 */ function getMaxLength (arr,minwidth=60) { return arr.reduce((acc, item) => { if (item) { let calcLen = getTextWidth(item); if (acc < calcLen) { acc = calcLen; } } return acc<minwidth?minwidth:acc; }, 0) } /** * @description 計(jì)算列表列寬(把內(nèi)容撐開(kāi)) * @param {Array} columns 列的數(shù)組 * @param {Array} tableArr 列表的數(shù)組 * */ function calcColumnsWidth(columns, tableArr) { columns.forEach((item) => { const arr = tableArr.map((x) => x[item.props]); item.width = getMaxLength(arr); arr.push(item.label); // 把每列的表頭也加進(jìn)去算 }); return columns; } <!--獲取列表數(shù)據(jù)之后,計(jì)算每列最大寬度--> let res = await this.axios.post('/api/xxx/xxxx'); if(res.data.data.length > 0){ const columns = calcColumnsWidth(this.tableHead, res.data.data); this.tableHead = columns; }
效果如下:列寬自動(dòng)撐開(kāi),列表寬度不夠時(shí),底部會(huì)出現(xiàn)滾動(dòng)軸。
到此這篇關(guān)于el-table-column 內(nèi)容不自動(dòng)換行的解決方法的文章就介紹到這了,更多相關(guān)el-table-column 不自動(dòng)換行內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 使用element ui中el-table-column進(jìn)行自定義校驗(yàn)
- vue如何使用element ui表格el-table-column在里面做判斷
- el-table-column疊加el-popover使用示例小結(jié)
- Vue+ElementUI踩坑之動(dòng)態(tài)顯示/隱藏表格的列el-table-column問(wèn)題
- Vue element el-table-column中對(duì)日期進(jìn)行格式化方式(全局過(guò)濾器)
- vue中如何給el-table-column添加指定列的點(diǎn)擊事件
- 關(guān)于el-table-column的formatter的使用及說(shuō)明
- vue中el-table格式化el-table-column內(nèi)容的三種方法
- el-table el-table-column表頭嵌套循環(huán)數(shù)據(jù)的示例代碼
相關(guān)文章
vue操作下拉選擇器獲取選擇的數(shù)據(jù)的id方法
今天小編就為大家分享一篇vue操作下拉選擇器獲取選擇的數(shù)據(jù)的id方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法
最近參與web開(kāi)發(fā)時(shí),讓我解決一個(gè)elementui控制內(nèi)容單行顯示,下面這篇文章主要給大家介紹了關(guān)于elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法,需要的朋友可以參考下2023-06-06Vue組件大全包括(UI組件,開(kāi)發(fā)框架,服務(wù)端,輔助工具,應(yīng)用實(shí)例,Demo示例)
本文為大家分享了網(wǎng)上比較流行的Vue組件,包括UI組件,開(kāi)發(fā)框架,服務(wù)端,輔助工具,應(yīng)用實(shí)例,Demo示例等開(kāi)源項(xiàng)目,總有一款適合你2018-10-10ToB項(xiàng)目如何沉淀業(yè)務(wù)公共組件示例詳解
這篇文章主要為大家介紹了ToB項(xiàng)目如何沉淀業(yè)務(wù)公共組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10Vue3進(jìn)階主題Composition API使用詳解
這篇文章主要為大家介紹了Vue3進(jìn)階主題Composition API使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04vscode搭建vue環(huán)境完整圖文教程(適合新手小白)
Vue框架的優(yōu)秀設(shè)計(jì)和強(qiáng)大的生態(tài)系統(tǒng)成為了越來(lái)越多開(kāi)發(fā)者選擇Vue的原因,在實(shí)際項(xiàng)目過(guò)程中一個(gè)高效的開(kāi)發(fā)環(huán)境能夠大大提高開(kāi)發(fā)效率,這篇文章主要給大家介紹了關(guān)于vscode搭建vue環(huán)境的相關(guān)資料,需要的朋友可以參考下2023-10-10