vueはテーブルを生成してソートします

今回はvueがテーブルを生成してソートするときの注意点を紹介します。実際のケースを見てみましょう。

これで、mybatis ページング プラグインを使用して生成されたテーブルが作成されました。テーブル内のデータは、vue を通じて取得されます。フロントエンド表示は を使用します。 バックグラウンドの vue はデータを取得し、ページング プラグインを使用してクエリを実行し、コールバックを使用して結果を vue

/**
 * 分页控件加载
 * @param data
 */
function aspnetPagerInfoIM(pageDataShow,pageModule,resource, modelCallBack) {
  var pageDataShow = $("#"+pageDataShow);
  var pageModule = $("#"+pageModule);
  pageDataShow.empty();
  pageModule.empty();
  resource.get({
    page: '0'
  }).then(function(response){
    initLaypage(pageDataShow,pageModule,response.data, resource, modelCallBack);
    modelCallBack(response.data.content);
  })
}
/**
 * 初始化分页组件
 * @param page 查询出来的数据包括分页信息
 * @param resource vue的resource对象
 * @param modelCallBack 每次页面跳转回调方法 modelCallBack(response.data.content)
 */
function initLaypage(pageDataShow,pageModule,page, resource, modelCallBack) {
  var singleInvoke = false
  laypage({
    cont : pageModule,
    pages : page.totalPages, //总页数
    skin : '#fff', //加载内置皮肤
    skip: true,    //是否开启跳页
    groups : 5,    //连续显示分页数
    hash : true,   //开启hash
    jump : function(obj) {
      if(!singleInvoke) {
        singleInvoke = true;
      }else {
        resource.get({
          page: obj.curr -1
        }).then(function(response){
          modelCallBack(response.data.content);
        })
      }
      pageDataShow.empty();
      if(page.totalElements>0){
        $("<p>共"+page.totalElements+"条记录，"
          +"每页"+page.size+"条，"
          +"当前第 "+obj.curr +"/"+page.totalPages+"页"
          +"</p>").appendTo(pageDataShow);
      }
    }
  });
}

のモデルに返します。 要件は、生成されたテーブルにシリアル番号を追加することです

js関数を使い始めたばかりです

function rownum(){
  //首先拿到table中tr的数量 得到一共多少条数据
  var len = $("#tableId table tbody tr").length;
  //使用循环给每条数据加上序号
  for(var i = 1;i<len+1;i++){
    $('#tableId table tr:eq('+i+') span:first').text(i);
  }
}

表を生成するクリックの

イベント

に上記のメソッドを置くと、シリアル番号が表示され、次のページまたはページングのページ番号をクリックすると、次のページに飛ぶとシリアル番号が消え、 次のページをクリックした後に連番を追加する操作があるはずだと考えるのが自然なので、次のページにデータを表示する方法を見つけて上記のjsメソッドを追加しましたが、結果は反映されませんでした、

個人的には、データが見つかった後、domが更新される前にrownumメソッドが追加され、domが更新された後、シリアル番号が消えたのではないかと考えています

この問題は、次のように情報を検索することで最終的に解決されました。ページング クエリが表示されるすべての場所に Vue.nextTick(function(){}) メソッドを追加します。 1.

2.

vm.$nextTick( [callback] )

3. 非同期更新キュー

Vue.nextTick( [callback, context] ) 例

var model={
object[]
}
spnetPagerInfoIM(electricalPageDataShow, electricalPageModule, electricalResource, function(result) {
  model.object = result;
  Vue.nextTick(function(){
    rownum();
  });
});

それとも

りー

Vue.nextTick() を使用する必要があるのはいつですか

Vue

ライフサイクル

のcreated()フック関数で実行する

DOM操作

は、Vue.nextTick()のコールバック関数に配置する必要があります。その理由は、created() フック関数が実行されると、DOM が 実際にはレンダリングは行われず、この時点での DOM 操作は無駄になるため、DOM 操作用の JS コードを Vue.nextTick() のコールバック関数に入れる必要があります。これに対応するのがマウントされたフック関数です。このフック関数が実行される時点で、すべての DOM のマウントとレンダリングが完了しているため、このフック関数内で DOM 操作を実行しても問題はありません。 。 データ変更後に実行する操作があり、その操作でデータの変更に応じて変更される DOM 構造を使用する必要がある場合、この操作を Vue.nextTick() のコールバック関数に含める必要があります。 Vue は DOM 更新を非同期で実行します。データの変更が検出されると、Vue はキューを開き、同じイベント ループで更新します。 データの変化を監視するウォッチャー このキューにプッシュします。このウォッチャーが複数回トリガーされた場合、キューにプッシュされるのは 1 回だけです。このバッファリング動作により、重複データによって生じる不必要な計算や DOm 操作を効果的に排除できます。次のイベント ループでは、Vue はキューをクリアし、必要な DOM 更新を実行します。

セットアップすると

rreee

すぐには更新されませんが、非同期キューがクリアされるとき、つまり次のイベント ループの開始時に更新が実行されるときに、必要な DOM 更新が実行されます。この時点で DOM を更新したい場合は

ある状態で何かをすると問題が発生します。 。データ変更後に Vue が DOM の更新を完了するのを待つため、データ変更後すぐに使用できます

Vue.nextTick(コールバック) 。このコールバック関数は、DOM の更新が完了した後に呼び出されます。

概要:

* `Vue.nextTick(callback)` では、データが変更された場合、更新後にコールバックが実行されます。 * `Vue.$nextTick(callback)` は、dom が変更されると、更新後にコールバックが実行されます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

データイベントを追加するためのポップアップポップアップボックスのバインディング (詳細なステップバイステップの説明)

js の使用方法の詳細な説明が必要

以上がvueはテーブルを生成してソートしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。