记录ant-design-vue列表的rowSelection动态隐藏的一个骚操作_:rowselection="true-CSDN博客

[xiaodongxier]

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

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

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

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

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

        :pagination="ipagination"        :rowSelection="rowSelectionSet"class="j-table-force-nowrap"        @change="handleTableChange">        description: 'dy_fjzl_catalog管理页面',        rowSelectionSet:{selectedRowKeys: selectedRowKeys, onChange: onSelectChange},if (dd.env.platform != 'notInDingTalk'){            this.rowSelectionSet = undefined;

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

    let checkBoxList = document.getElementsByClassName("ant-table-selection-column")      console.log(checkBoxList) // 显示对象中有11个值      console.log(checkBoxList.length)  // 输出1个？？？

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

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

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

        :pagination="ipagination"        :rowSelection="dingdingShow?{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}:undefined"class="j-table-force-nowrap"        @change="handleTableChange">if (dd.env.platform != 'notInDingTalk'){        this.dingdingShow = false;