vue의 v-for를 사용하여 테이블을 생성하고 테이블에 일련번호를 추가하세요.
- 小云云원래의
- 2018-01-02 10:06:032752검색
이 글은 vue의 v-for를 사용하여 테이블을 생성하고 테이블에 일련번호를 추가하는 방법에 대한 관련 정보를 주로 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.
이제 mybatis 페이징 플러그인을 사용하여 생성된 테이블이 있습니다. 프런트 엔드 디스플레이는
배경을 사용합니다. 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(){}) 메소드가 페이징 쿼리가 발생한 모든 위치에 추가되었습니다
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()
yourcreated() 후크 함수를 사용해야 하는 경우 DOM 작업은 다음의 콜백 함수에 배치되어야 합니다. Vue.nextTick(). 그 이유는 create() Hook 함수가 실행될 때 실제로 DOM이 전혀 렌더링되지 않고, 이때의 DOM 작업이 헛되기 때문에 DOM 작업을 위한 js 코드를 Vue에 넣어야 하기 때문입니다. nextTick()의 콜백 함수에서. 이에 대응하는 것이 탑재된 Hook 함수인데, 이 Hook 함수가 실행되면 모든 DOM 탑재 및 렌더링이 완료되므로 이 Hook 함수에서 DOM 작업을 수행하는 데에는 문제가 없습니다.
데이터 변경 후 작업을 수행해야 하고, 이 작업에 데이터 변경에 따라 변경되는 DOM 구조를 사용해야 하는 경우 이 작업을 Vue.nextTick()의 콜백 함수에 넣어야 합니다.
Vue는 DOM 업데이트를 비동기식으로 수행합니다. 데이터 변경이 관찰되면 Vue는 대기열을 열고 동일한 이벤트 루프의 데이터 변경을 관찰하는 감시자를 이 대기열에 푸시합니다. 이 감시자가 여러 번 트리거되면 대기열에 한 번만 푸시됩니다. 이러한 버퍼링 동작은 중복 데이터로 인해 발생하는 불필요한 계산 및 DOM 작업을 효과적으로 제거할 수 있습니다. 다음 이벤트 루프에서 Vue는 큐를 지우고 필요한 DOM 업데이트를 수행합니다.
vm.someData = 'new value'，DOM
를 설정하면 즉시 업데이트되지 않지만, 비동기 대기열이 지워질 때, 즉 다음 이벤트 루프가 시작될 때 업데이트가 수행될 때 필요한 DOM 업데이트가 수행됩니다. 이 시점에서 업데이트된 DOM
상태를 기반으로 작업을 수행하려는 경우 문제가 발생합니다. . 데이터 변경 후 Vue가 DOM 업데이트를 완료할 때까지 기다리려면 데이터 변경 직후
Vue.nextTick(콜백)을 사용할 수 있습니다. 이 콜백 함수는 DOM 업데이트가 완료된 후에 호출됩니다.
요약:
* `Vue.nextTick(callback)`, 데이터가 변경되면 업데이트 후 콜백이 실행됩니다.
* `Vue.$nextTick(callback)`, dom이 변경되면 업데이트 후 콜백이 실행됩니다.
관련 권장 사항:
v for 명령에 대한 Vue 구성 요소 소개 및 v-for 사용 시 경보 문제 분석
위 내용은 vue의 v-for를 사용하여 테이블을 생성하고 테이블에 일련번호를 추가하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!