ホームページ >ウェブフロントエンド >jsチュートリアル >vue の v-for を使用してテーブルを生成し、テーブルにシリアル番号を追加します。
vue の v-for を使用してテーブルを生成し、テーブルにシリアル番号を追加します。
- 小云云オリジナル
- 2018-01-02 10:06:032799ブラウズ
この記事では、vue の v-for を使用してテーブルを生成し、テーブルにシリアル番号を追加する方法について主に紹介します。必要な方は参考にしていただければ幸いです。
これで、mybatis ページング プラグインを使用して生成されたテーブルが作成されました。テーブル内のデータは、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(){}) メソッドがページング クエリが発生したすべての場所に追加されました
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 更新を実行します。
vm.someData = 'new value'，DOM
を設定すると、すぐには更新されませんが、非同期キューがクリアされたとき、つまり次のイベントループの開始時に更新が実行されるときに、必要なDOM更新が実行されます。この時点で、更新された DOM
状態に基づいて何かを実行したい場合、問題が発生します。 。データ変更後に Vue が DOM の更新を完了するのを待つために、データ変更直後に
Vue.nextTick(callback) を使用できます。このコールバック関数は、DOM の更新が完了した後に呼び出されます。
概要:
* `Vue.nextTick(callback)`、データが変更されると、更新後にコールバックが実行されます。
* `Vue.$nextTick(callback)` では、dom が変更されると、更新後にコールバックが実行されます。 関連する推奨事項:vue v-for データ処理を説明する例
vue コンポーネントの v for コマンドの紹介と v-for 使用時のアラーム問題の分析
以上がvue の v-for を使用してテーブルを生成し、テーブルにシリアル番号を追加します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。