vue는 테이블을 생성하고 정렬합니다.
- php中世界最好的语言원래의
- 2018-04-16 14:17:213931검색
이번에는 vue가 테이블을 생성하고 정렬할 때 몇 가지 노트를 가져오겠습니다. 다음은 실제 사례입니다.
이제 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(){}) 메서드를 추가하여 마침내 문제가 해결되었습니다.
1. vm.$nextTick( [콜백] )
2. Vue.nextTick( [콜백, 컨텍스트] )vm.$nextTick( [callback] )
二、Vue.nextTick( [callback, context] )
var model={
object[]
}
spnetPagerInfoIM(electricalPageDataShow, electricalPageModule, electricalResource, function(result) {
model.object = result;
Vue.nextTick(function(){
rownum();
});
});
아니면 <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渲染已经完成')
})
}
}})
언제 Vue.nextTick()을 사용해야 합니까?
Vuelifecycle의 Created() 후크 함수에서 수행하는 DOM 작업은 Vue.nextTick()의 콜백 함수에 배치되어야 합니다. 그 이유는 Created() Hook 함수가 실행될 때 DOM이 실제로 렌더링은 전혀 하지 않고, 이때의 DOM 연산은 헛수고이므로 DOM 연산을 위한 js 코드를 Vue.nextTick()의 콜백 함수에 넣어야 합니다. 이에 대응하는 것이 Mounted Hook 함수인데, 이 Hook 함수가 실행되면 모든 DOM Mounting과 Rendering이 완료되었기 때문에, 이 Hook 함수에서는 DOM 연산을 수행하는데 문제가 없을 것입니다. .
데이터 변경 후 수행할 작업이 있고, 해당 작업에 데이터 변경에 따라 변경되는 DOM 구조를 사용해야 하는 경우 이 작업을 Vue.nextTick()의 콜백 함수에 넣어야 합니다. Vue는 DOM 업데이트를 비동기적으로 수행합니다. 데이터 변경이 관찰되면 Vue는 대기열을 연 다음 동일한 이벤트 루프에서 업데이트합니다. 데이터 변화를 관찰하는 감시자 이 대기열에 푸시합니다. 이 감시자가 여러 번 트리거되면 대기열에 한 번만 푸시됩니다. 이러한 버퍼링 동작은 중복 데이터로 인해 발생하는 불필요한 계산 및 DOM 작업을 효과적으로 제거할 수 있습니다. 다음 이벤트 루프에서 Vue는 큐를 지우고 필요한 DOM 업데이트를 수행합니다.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);
}); 설정 시
즉시 업데이트되지는 않지만 비동기 대기열이 지워질 때, 즉 다음 이벤트 루프가 시작될 때 업데이트가 수행될 때 필요한 DOM 업데이트가 수행됩니다. 이때 DOM을 업데이트하고 싶다면
어떤 상태에서 뭔가를 하면 문제가 생기기 마련이다. . 데이터 변경 후 Vue가 DOM 업데이트를 완료할 때까지 기다리려면 데이터 변경 후 즉시 사용할 수 있습니다
Vue.nextTick(콜백) . 이 콜백 함수는 DOM 업데이트가 완료된 후에 호출됩니다.
요약:
* `Vue.nextTick(callback)`, 데이터가 변경되면 업데이트 후 콜백이 실행됩니다.* `Vue.$nextTick(callback)`, dom이 변경되면 업데이트 후 콜백이 실행됩니다.
데이터 이벤트 추가를 위한 팝업 팝업 상자 바인딩(자세한 단계별 설명)
위 내용은 vue는 테이블을 생성하고 정렬합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!