cq-panda
commented
2 years ago 官网例子如下图：
我按照【方式1】去设置时可以正常显示/隐藏 但是我在【方式1】的基础上去稍作修改，动态显示/隐藏列的时候，发现没有实现预想的效果 我的代码片段： `methods: {//事件扩展 onInit() { }, searchAfter (rows, result) { if (this.searchFormFields.DataType == "XXX") { this.columns.forEach(x => { if (x.field == "InvoiceNo") { x.hidden = true; } else { x.hidden = false; } }); } else { this.columns.forEach(x => { x.hidden = false; }); }
return true; } }`我想在检索条件 DataType = 'XXX' 时，隐藏 【InvoiceNo】这一列，但是当条件成立时，并没有隐藏
经过调试后发现，当页面表格完成初始化后，改变 this.columns 的某一列的 hidden 属性后并没有触发 VolTable 组件的 filterColumns 计算属性的重新计算，所以无法正常实现显示/隐藏，通过 this.columns[i].hidden = false 这种方式修改一个数组的某个元素的值时，VUE是检测不到变化的 this.columns 的更新 在我查看源码后发现，官网的例子之所以可以隐藏，是因为这个例子的隐藏条件是固定的，且 searchBefore 方法第一次执行的时候是在 VolTable 的 created 钩子函数里调用的，所以 filterColumns 计算属性可以正常计算出第一次的显示列
`methods: {//事件扩展 onInit() { }, searchAfter (rows, result) { if (this.searchFormFields.DataType == "XXX") { this.columns.forEach(x => { if (x.field == "InvoiceNo") { x.hidden = true; } else { x.hidden = false; } }); } else { this.columns.forEach(x => { x.hidden = false; }); }
this.columns.push(); return true; } }`当调用一下 this.columns.push() 后，触发 this.columns 数组的变更检测，就可以正常显示/隐藏
试下this.$set(x,'hidden',true/false)
863621593
官网例子如下图：
我按照【方式1】去设置时可以正常显示/隐藏
但是我在【方式1】的基础上去稍作修改，动态显示/隐藏列的时候，发现没有实现预想的效果
我的代码片段：
`methods: {//事件扩展
onInit() {
},
searchAfter (rows, result) {
if (this.searchFormFields.DataType == "XXX") {
this.columns.forEach(x => {
if (x.field == "InvoiceNo") {
x.hidden = true;
} else {
x.hidden = false;
}
});
} else {
this.columns.forEach(x => {
x.hidden = false;
});
}
我想在检索条件 DataType = 'XXX' 时，隐藏 【InvoiceNo】这一列，但是当条件成立时，并没有隐藏
经过调试后发现，当页面表格完成初始化后，改变 this.columns 的某一列的 hidden 属性后并没有触发 VolTable 组件的 filterColumns 计算属性的重新计算，所以无法正常实现显示/隐藏，通过 this.columns[i].hidden = false 这种方式修改一个数组的某个元素的值时，VUE是检测不到变化的 this.columns 的更新 在我查看源码后发现，官网的例子之所以可以隐藏，是因为这个例子的隐藏条件是固定的，且 searchBefore 方法第一次执行的时候是在 VolTable 的 created 钩子函数里调用的，所以 filterColumns 计算属性可以正常计算出第一次的显示列
`methods: {//事件扩展 onInit() { }, searchAfter (rows, result) { if (this.searchFormFields.DataType == "XXX") { this.columns.forEach(x => { if (x.field == "InvoiceNo") { x.hidden = true; } else { x.hidden = false; } }); } else { this.columns.forEach(x => { x.hidden = false; }); }
当调用一下 this.columns.push() 后，触发 this.columns 数组的变更检测，就可以正常显示/隐藏