v-for はテーブルを生成し、テーブルにシリアル番号を追加するメソッドを実装します。-jsチュートリアル-php.cn

v-for はテーブルを生成し、テーブルにシリアル番号を追加するメソッドを実装します。

小云云

リリース： 2018-01-20 13:47:56

オリジナル

2078 人が閲覧しました

この記事では、vue の v-for を使用してテーブルを生成し、テーブルにシリアル番号を追加する方法について主に紹介します。必要な方は参考にしていただければ幸いです。

これで、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: &#39;0&#39;
  }).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 : &#39;#fff&#39;, //加载内置皮肤
    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++){
    $(&#39;#tableId table tr:eq(&#39;+i+&#39;) span:first&#39;).text(i);
  }
}

ログイン後にコピー

上記のメソッドをクリックに置くと、テーブルを生成するイベント上でシリアル番号を表示し、次のページまたはページングのページ番号をクリックするとジャンプできます。次のページをクリックするとシリアル番号が消えます

次のページをクリックした後に追加されると考えるのが自然ですが、次のページにデータを表示する方法を見つけたので上記のjsを追加しました。メソッドを実行しましたが、結果は反映されませんでした

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

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

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

ログイン後にコピー

1。 vm.$nextTick( [callback] )

2. Vue.nextTick( [callback, context] )vm.$nextTick( [callback] )

二、Vue.nextTick( [callback, context] )

3. 非同期更新キュー

<ul id="demo">
  <li v-for="item in list">{{item}}</p>
</ul>
new Vue({
  el:&#39;#demo&#39;,
  data:{
    list=[0,1,2,3,4,5,6,7,8,9,10]
  },
  methods:{
    push:function(){
      this.list.push(11);
      this.nextTick(function(){
        alert(&#39;数据已经更新&#39;)
      });
      this.$nextTick(function(){
        alert(&#39;v-for渲染已经完成&#39;)
      })
    }
  }})

ログイン後にコピー

または

this.$http.post(apiUrl)
  .then((response) => {
  if (response.data.success) {
    this.topFocus.data = response.data.data;
    this.$nextTick(function(){
          //渲染完毕
    });
    }
  }).catch(function(response) {
    console.log(response);
  });

ログイン後にコピー

Vue.nextTick()

Vue ライフサイクルの created() フック関数で実行する DOM 操作は、Vue.nextTick() のコールバック関数に配置する必要があります。理由は何でしょうか? 理由は、create() フック関数の実行時に実際には DOM がまったくレンダリングされず、このときの DOM 操作が無駄になるため、DOM 操作用の JS コードを Vue に入れる必要があるためです。 nextTick() のコールバック関数内。これに対応するのが実装されたフック関数です。このフック関数が実行される時点ですべての DOM のマウントとレンダリングが完了しているため、このフック関数内で DOM 操作を実行しても問題はありません。

データ変更後に操作を実行する必要があり、この操作でデータの変更に応じて変更される DOM 構造を使用する必要がある場合、この操作を Vue.nextTick() のコールバック関数に含める必要があります。

Vue は、データ変更が監視されると、DOM 更新を非同期で実行し、キューを開き、同じイベントループ内のデータ変更を監視するウォッチャーをこのキューにプッシュします。このウォッチャーが複数回トリガーされた場合、キューにプッシュされるのは 1 回だけです。このバッファリング動作により、重複データによって生じる不必要な計算や DOm 操作を効果的に排除できます。次のイベントループでは、Vue はキューをクリアし、必要な DOM 更新を実行します。

 vm.someData = &#39;new value&#39;，DOM

ログイン後にコピー

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

状態に基づいて何かを実行したい場合、問題が発生します。。データ変更後に Vue が DOM の更新を完了するのを待つために、データ変更直後に

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

概要:

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