- 問題の説明: el-table では、現在の行の特定の列のテキストが長すぎる場合があり、これによりテーブルが引き伸ばされ、外観に影響を与えます。したがって、長すぎるテキストを非表示にする必要があります。詳細をクリックするとテキストの内容がすべて展開され、クリックして折りたたむと非表示になります。
効果は次のとおりです。
詳細をクリックすると、効果は次のようになります。
具体的な実装プロセス
方法 1:
まず、ここで設定したのは、発言の長さが 30 文字列を超える場合に折りたたみと詳細が表示されるというものですが、ここは必要に応じて変更できます。
<el-table-column prop="memo" label="备注" align="center" min-width="200px" sortable>
<template slot-scope="scope">
<!-- v-if备注大于30个字符串的时候，才显示收起和详情 -->
<div v-if="scope.row.memo.length > 30">
<div class="ellipsis" v-text="ellipsisText(scope.row.memo, scope.$index)"></div>
<span v-show="showDetail[scope.$index]"> {
{
scope.row.memo }} </span>
<el-link type="primary" @click="toggleDetail(scope.$index)">
{
{
showDetail[scope.$index] ? '收起' : '详情' }}
</el-link>
</div>
<div v-else>{
{
scope.row.memo }}</div>
</template>
</el-table-column>
アプローチ
export default {
data() {
return {
showDetail: [] // 控制全部文本显隐状态的数组}
}
},
methods: {
//备注文字过长时显示问题
ellipsisText(text, index) {
if (this.showDetail[index]) {
return '';
} else if (text.length > 30) {
// 文本长度大于 30 时，截取前 30 个字符
return `${
text.slice(0, 30)}...`;
} else {
return text;
}
},
toggleDetail(index) {
this.$set(this.showDetail, index, !this.showDetail[index]); // 利用 Vue.set 设置 showDetail 数组中当前行的显隐状态
},
}
}
スタイル
<style lang="scss" scope>
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
}
</style>
方法 2:
el-table の show-overflow-tooltip バインディングに従って: show-overflow-tooltip='true'。
