vue表格顯示字符串過長的問題及解決

更新時間：2023年10月19日 15:56:34 作者：muLanlh

這篇文章主要介紹了vue表格顯示字符串過長的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

第一種

首先我們看下未做處理的樣式：

可以看到學院字段過長，當然我引用的el-table自帶的樣式給自動換行了,但如果自己寫的table會導致樣式很丑。

我們可以用el-collapse來進行字符串處理

代碼如下：

<el-table-column prop="collegeName"
                           align="center"
                           width="150"
                           label="學院">
                        <template slot-scope="scope">
                            <el-collapse v-if="scope.row.collegeName !== null">
                                <el-collapse-item :title="scope.row.collegeName.substring(0,6)">
                                    <div>{{scope.row.collegeName}}</div>
                                </el-collapse-item>
                            </el-collapse>
                        </template>
                    </el-table-column>

但是這個樣式非常丑

第二種

用el-tooltip處理,但是這種樣式有限制，必須給定div寬度，否則不能實現(xiàn)隱藏，而且完整字段的位置會出現(xiàn)偏移，還是原字符串長度的中部，但是樣式比第一種好看一些。

<div style="width: 100px;height: 20px;float: left">
                                        <el-tooltip class="item" effect="dark" :content="scope.row.product.name" placement="top-start">
                                            <span style="max-width: 6em;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{scope.row.product.name}}</span>
                                        </el-tooltip>
                                    </div>

第三種

終極方案，依舊使用el-tooltip，只是結合一下一二種方式。

代碼如下：

<el-table-column prop="collegeName"
                                     align="center"
                                     width="150"
                                     label="學院">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" :content="scope.row.collegeName" placement="top-start">
                                <span>{{scope.row.collegeName.substring(0,8)}}...</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>

我們可通過控制substring的第二個參數(shù)來控制顯示字符串的長度

結果如下：