Vue、el-table のテキストが長すぎて省略されています。クリックして表示した後に el-tooltip のスタイルを変更してください

モバイル側では、データ表示に elementUI テーブルを使用する場合、あまり重要ではない情報が含まれる場合があるため、多くのボード情報を占有することは望ましくありません。制御のために
min-width="120" :show-overflow-tooltip="true" を追加できます。

 <el-table-column prop="id" label="订单号" align="center" width="140"
 min-width="120" :show-overflow-tooltip="true">
 </el-table-column>

これにより、長い情報は省略されます

1. クリックすると、省略された情報が表示されます 表示される情報のサイズを変更したい場合
2. 開発者ツールを開き、クラスが el-tooltip__popper であることを確認します
3. そして、el-tooltip__popper が外部にあることを確認しますグローバルアプリ

方法 1 (推奨) el-table を使用して vue ファイルのスタイルを変更する

まず第一に、なぜローカルの vue ファイルで変更することが推奨されるのかというと、複数の vue ファイルに el-tooltip プロンプト コンポーネントを導入している可能性がありますが、各 vue ファイルの el-tooltip の要件スタイルは同じではないためです。ローカル変更スタイルの方が推奨されます

変更方法: 要素の el-tooltip__popper はグローバル アプリの外側にあるため、ローカル vue ファイルのスタイルを変更する場合、スコープ付きの変更は使用できませんが、他のスタイルをスコープ付きで変更する必要がある場合はどうすればよいですか。非常に単純です。次に、2 つのスタイル タグを記述します。1 つはスコープ付きの変更を含み、もう 1 つはスコープ付きの変更なしです (内部の el-tooltip__popper のスタイルを変更します)。

具体的なコードは以下の通り

<style>
/* 文字过长省略 弹窗的样式 */
/* **************************不加scoped因为 .el-tooltip标签不在这个vue中 */
.el-tooltip__popper{
      
      
    font-size: 4vw;
    line-height: 1.5;
}
</style>

<style scoped lang="less">
.home{
      
      
  width: 100%;
  height: 100%;
}
//省略。。。。。。。。。。
</style>

スタイルをグローバルに変更する方法 2 (非推奨)

App.vue ファイル内でクラスのスタイルを直接変更し、 App.vue の
style タグに次のコードを追加します。

/* 移动端 el-table表格字体省略 点击显示后的样式 */
.el-tooltip__popper{
    font-size: 3.6vw;
    line-height: 1.5;
}

ディスプレイ効果