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

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

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

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

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

// template代码
<a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="rowSelectionSet"
        class="j-table-force-nowrap"
        @change="handleTableChange">
</a-table>

// 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
<a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="dingdingShow?{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}:undefined"
        class="j-table-force-nowrap"
        @change="handleTableChange">
</a-table>


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