记录ant-design-vue列表的rowSelection动态隐藏的一个骚操作

有一个列表页，我希望的效果是电脑浏览器中打开，是带有选择框的；而在钉钉中打开只用于查看（由于宽度限制需要隐藏checkbox）

显示checkbox的配置项   :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"   达到效果

不显示checkbox，删除:rowSelection这一个配置项  达到效果

电脑端显示，钉钉端（手机端）不显示，开始踩坑：

1、参考columns配置参数，失败

// template代码

// vue数据定义代码
data () {return {description: 'dy_fjzl_catalog管理页面',// 表头columns: [...],rowSelectionSet:{selectedRowKeys: selectedRowKeys, onChange: onSelectChange},}},// 挂载完处理函数
mounted() {if (dd.env.platform != 'notInDingTalk'){this.rowSelectionSet = undefined;}
}

2、在挂载完成之后，通过class选择器选择，批量设置display:none属性。--失败

mounted() {let checkBoxList = document.getElementsByClassName("ant-table-selection-column")console.log(checkBoxList) // 显示对象中有11个值console.log(checkBoxList.length)  // 输出1个？？？// 此时因长度有问题，for循环无法完成遍历
}

按理来说，mounted就是页面加载完成，列表都获取到了，但是无法遍历列表内容，包括getElementsByName获取的NodeList也是一样的情况。

之后就这2个方向不断的变换姿势尝试，始终无法解决。

最终灵机一动，在rowSelection配置项那加一个三元运算式，将控制变量带入解决，代码分享如下：

// template

// vue
mounted() {if (dd.env.platform != 'notInDingTalk'){this.dingdingShow = false;}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！