vue の v-for を使用してテーブルを生成し、テーブルにシリアル番号を追加します。-jsチュートリアル-php.cn

vue の v-for を使用してテーブルを生成し、テーブルにシリアル番号を追加します。

小云云

リリース： 2018-01-02 10:06:03

オリジナル

2779 人が閲覧しました

この記事では、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: '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++){
    $(&#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])

3. 非同期更新キュー

インスタンス

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

ログイン後にコピー

または

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 ライフサイクルで Vue.nextTick()

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

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

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