Vue + jquery を使用してテーブルの指定した列のテキストを縮小する方法

この記事では、テーブルの指定列のテキスト縮小を実現するVue+jqueryのサンプルコードを中心に紹介しますので、参考にしてください。

この記事では、テーブルの指定した列のテキスト縮小を実現するための Vue+jquery のサンプルコードを紹介します。詳細は次のとおりです。

その効果は非常に簡単です。 、でも、Vue は React に適していないので、書くのは本当に簡単ではありません。フロントエンド フレームワークの経験がある人はフレンドリーではありません
(愚痴を減らし、もっと働き、時間を節約し、外出しましょう)

まず話させてください。私がとった寄り道について: この列を操作するために v-if コマンドを使用したかったのです

コード これは次のようなものです:

<el-table-column width="250" align="center" label="比较基准">
 <template scope="scope">
  <span v-if="isAllTxt">{{getShortStr(scope.row.benchmark)}}</span>
  <span v-else>{{scope.row.benchmark}}</span>
  <i @click="changeTxt" style="margin-left:8px;color: #20a0ff;" class="el-icon-more"></i>
 </template> 
</el-table-column>

changeTxt メソッドでブール値 isAllTxt を変更し、長文と短文の表示を制御します

えと、その後、任意の行をクリックするたびに、この列のすべてのテキストが変更されます。うーん、この種の製品は決して同意しません。授業中に全員が立つと思いますか? ? ?

わかりました。jquery 時代のオリジナルの開発エクスペリエンスを使用し、クリック イベントで $(this) を渡し、手動で dom を変更します

(プロジェクトが jquery で構成されている場合、振り返ってください: //www .jb51.net/article/115161.htm、上がって自分で設定してください)

changeTxt($(this))

changeTxt(ref) {
  ref.text(XXX);
}

結果はもちろんエラーです:

下にクラスメイトがいます jqueryのインポートが間違っているからでしょうか？ ? ?

もちろんそうではありません。ここでの this は dom の this ではなく、vue の vm オブジェクトです。信じられない場合は、jquery の $ メソッドを使用して試してみてください。これは jquery のせいではありません。 。

考えるのが好きな人は、これを直接使用してもいいのかと尋ねるかもしれません。

changeTxt(this)

取得するものは現在の要素のオブジェクトではなく、このパスはブロックされています。

vue で要素オブジェクトを取得するにはどうすればよいですか? ? ?

要素にref

<span ref="txt">{{getShortStr(scope.row.benchmark)}}</span>

を定義し、メソッド内のthis.$refs['txt'].text(XXX)を通してdomを変更するんですね。

参照は何を返しますか? ? ? 操作は不可能で、返されたラベルはテーブルの最後の行のデータです。うわー、めちゃくちゃで爆発しています。

スパンのIDを定義するのに最も愚かな方法を使用するしかありません、それは別のIDであり、JQueryを使用してIDに対応する要素を取得します

<el-table-column width="250" align="center" label="比较基准"> 
 <template scope="scope">
   <span :id="scope.row.id">{{getShortStr(scope.row.benchmark)}}</span>
  <i v-if="scope.row.benchmark.length>20" @click="changeTxt(scope.row.benchmark,scope.row.id)" style="margin-left:8px;color: #20a0ff;" class="el-icon-more">
  </i>
 </template>
</el-table-column>

// changeTxt方法：
  changeTxt(txt,id) {
   this.isAllTxt = !this.isAllTxt;
   if(this.isAllTxt){
    $(&#39;#&#39;+id).text(txt);
   }else{
    $(&#39;#&#39;+id).text(this.getShortStr(txt));
   }
  }

// getShortStr 方法
getShortStr(txt_origin) {
 if(txt_origin.length > 20){
  return txt_origin.substring(0,20);
 }else{
  return txt_origin;
 }
}

上記は私が皆さんのためにコンパイルしたものです、私は将来的には皆さんのお役に立てば幸いです。

関連記事:

JSスクリプトを使用してロード後に対応するコールバック関数を実装する方法

vue+webpackを使用してパッケージ化されたファイルの404ページ空白の問題を解決する方法

デバッグとWebpack プロジェクトによる独立したパッケージング構成 ドキュメント (詳細なチュートリアル)

以上がVue + jquery を使用してテーブルの指定した列のテキストを縮小する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。