,这是基本html组件标签;
new Vue({
el: '#app',
data:{
columns1: [{
title: '姓名',
key: 'name'
},
{
title: '登录名',
key: 'loginName',
sortType: 'normal'
},
{
title: '邮箱',
key: 'email'
}
],
data3: [],
pagenation : {
current : 1,
total : 0
},
userName : ''
},
mounted : function(){
this.$nextTick(function () {
this.loadUser();
})
},
methods:{
loadUser : function(page){
var obj = {pageNo:page ? page : 1,pageSize:10,name:this.userName};
this.$http.post(
'/cggl/a/sys/user/getUsers',
obj,
{emulateJSON:true}
).then(function(res){
// console.log(res);
this.data3 = res.body.list;
this.pagenation.total = res.body.count;
},function(){
this.$Message.error('服务器请求失败!')
});
},
pageChange : function(currentPage){
this.loadUser(currentPage);
}
}
})
这是vue实例。
在at-table组件中不加optional,页面正常,并且可以实现分页功能;但是在加了optional参数后则页面报错,报错信息:
vue.min.js:6 TypeError: Cannot read property 'isChecked' of undefined
at o.isSelectAll (at.min.js:4779)
at St.get (vue.min.js:6)
at St.evaluate (vue.min.js:6)
at o.isSelectAll (vue.min.js:6)
at o.render (at.min.js:8982)
at o.fn._render (vue.min.js:6)
at o. (vue.min.js:6)
at St.get (vue.min.js:6)
at St.run (vue.min.js:6)
at At (vue.min.js:6)
He @ vue.min.js:6
Re @ vue.min.js:6
Fe @ vue.min.js:6
fn._render @ vue.min.js:6
(anonymous) @ vue.min.js:6
St.get @ vue.min.js:6
St.run @ vue.min.js:6
At @ vue.min.js:6
(anonymous) @ vue.min.js:6
Ke @ vue.min.js:6
Promise resolved (async)
Be @ vue.min.js:6
Ze @ vue.min.js:6
(anonymous) @ vue.min.js:6
St.update @ vue.min.js:6
oe.notify @ vue.min.js:6
set @ vue.min.js:6
Et.Tt.set @ vue.min.js:6
(anonymous) @ userListUikit.html:74
Promise resolved (async)
r.then @ vue-resource.js:7
loadUser @ userListUikit.html:72
(anonymous) @ userListUikit.html:62
(anonymous) @ vue.min.js:6
Ke @ vue.min.js:6
Promise resolved (async)
Be @ vue.min.js:6
Ze @ vue.min.js:6
(anonymous) @ vue.min.js:6
St.update @ vue.min.js:6
oe.notify @ vue.min.js:6
set @ vue.min.js:6
Et.Tt.set @ vue.min.js:6
makeDataWithSortAndPage @ at.min.js:4832
created @ at.min.js:4935
_t @ vue.min.js:6
hn._init @ vue.min.js:6
o @ vue.min.js:6
(anonymous) @ vue.min.js:6
init @ vue.min.js:6
(anonymous) @ vue.min.js:6
b @ vue.min.js:6
v @ vue.min.js:6
b @ vue.min.js:6
v @ vue.min.js:6
b @ vue.min.js:6
(anonymous) @ vue.min.js:6
_update @ vue.min.js:6
(anonymous) @ vue.min.js:6
St.get @ vue.min.js:6
St @ vue.min.js:6
hn.$mount @ vue.min.js:6
hn.$mount @ vue.min.js:6
hn._init @ vue.min.js:6
hn @ vue.min.js:6
(anonymous) @ userListUikit.html:36
vue.min.js:6 TypeError: Cannot read property 'querySelectorAll' of undefined
at o. (at.min.js:4919)
at Array. (vue.min.js:6)
at Ke (vue.min.js:6)
at
He @ vue.min.js:6
Re @ vue.min.js:6
Fe @ vue.min.js:6
(anonymous) @ vue.min.js:6
Ke @ vue.min.js:6
Promise resolved (async)
Be @ vue.min.js:6
Ze @ vue.min.js:6
fn.$nextTick @ vue.min.js:6
handleResize @ at.min.js:4917
sortData @ at.min.js:4762
St.run @ vue.min.js:6
At @ vue.min.js:6
(anonymous) @ vue.min.js:6
Ke @ vue.min.js:6
Promise resolved (async)
Be @ vue.min.js:6
Ze @ vue.min.js:6
(anonymous) @ vue.min.js:6
St.update @ vue.min.js:6
oe.notify @ vue.min.js:6
set @ vue.min.js:6
Et.Tt.set @ vue.min.js:6
(anonymous) @ userListUikit.html:74
Promise resolved (async)
r.then @ vue-resource.js:7
loadUser @ userListUikit.html:72
(anonymous) @ userListUikit.html:62
(anonymous) @ vue.min.js:6
Ke @ vue.min.js:6
Promise resolved (async)
Be @ vue.min.js:6
Ze @ vue.min.js:6
(anonymous) @ vue.min.js:6
St.update @ vue.min.js:6
oe.notify @ vue.min.js:6
set @ vue.min.js:6
Et.Tt.set @ vue.min.js:6
makeDataWithSortAndPage @ at.min.js:4832
created @ at.min.js:4935
_t @ vue.min.js:6
hn._init @ vue.min.js:6
o @ vue.min.js:6
(anonymous) @ vue.min.js:6
init @ vue.min.js:6
(anonymous) @ vue.min.js:6
b @ vue.min.js:6
v @ vue.min.js:6
b @ vue.min.js:6
v @ vue.min.js:6
b @ vue.min.js:6
(anonymous) @ vue.min.js:6
_update @ vue.min.js:6
(anonymous) @ vue.min.js:6
St.get @ vue.min.js:6
St @ vue.min.js:6
hn.$mount @ vue.min.js:6
hn.$mount @ vue.min.js:6
hn._init @ vue.min.js:6
hn @ vue.min.js:6
(anonymous) @ userListUikit.html:36
问题描述
我也碰到了这个问题,表现为使用静态的数据可以渲染表格前的多选按钮,但是如果后来改变了这个数据,而且新的数据的行数要比之前多就会出现这个问题,举例来说:一开始静态数据有5条,这5条是可以正常初始化带optional选项的表格,但是如果后来动态改变了数据到6条, 那么多的那一条在渲染时会报错,具体错误如下图
原因我猜是代码中不会根据数据条数来重新生成前面的input选择按钮,导致数据条数一旦比最开始初始化的时候多就会导致多的那些数据没有对应的input选择按钮,然后报错。
临时解决方案
目前来说暂时的解决方案是你的表格一页想要展现多少条数据,那么初始化的时候写入多少条空数据,之后通过ajax或者其他方式生成了真实的数据以后再把这些假数据替换掉。
例如如果你的表格要展示10条数据,那么在你绑定的数据中就写上[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, ],这样暂时能保证表示初始化正常,后期改变这10条数据也能正确渲染上,但是毕竟不是最合适的解决方案,还是希望官方能够尽快修复这个bug!
使用这个插件库的时候也遇到这个问题了,不过经过折腾发现可以这样处理。
修改源码:
watch监听事件中:
watch: {
allData () {
this.total = this.allData.length
this.objData = this.makeObjData() // 增加该段代码
}
}
还是没有修复吗,我发现我切换pagesize时会报Cannot read property 'isChecked' of undefined