Antd table无权限时，部分列增加蒙层

现有一个，无权限时，表格只能查看部分列数据，但是不可查看部分仍要显示列，只是不能查看列中数据，实际效果如图：

实现思路一：（此方法比较笨~）

1. 获取不可查看列的宽度 
  const els = document.querySelectorAll('.ant-table-header colgroup col');
2. 获取table的body滚动高度
  const tbody = document.querySelectorAll('.ant-table-tbody')[0];
3. 将蒙层宽度设置为不可查看的总列宽，高度设置为tbody的滚动高度，遮住表格，这里总列个数通过传入的值获取，比如需要遮住第一第二两列，传入rangeCol=[0,1],
4. 需要遮住第二第三第四三列，则传入rangeCol=[1,3]

总代码

// 遮罩层
function Mask(props) {
    const { rangeCol } = props;
    const els = document.querySelectorAll('.ant-table-header colgroup col');
    const tbody = document.querySelectorAll('.ant-table-tbody')[0];
    let width = 0;
    if (els.length) {
      for (let i = rangeCol[0]; i <= rangeCol[1]; i++) {
        width += els[i].clientWidth;
      }
    }
    return (
      <div
        className={`mask`}
        style={{ width: `${width}px`, height: `${tbody.scrollHeight}px` }}
      >
        <div>开通权限可查看</div>
      </div>
    );
  }
// css部分
  .mask {
      position: absolute;
      top: 0;
      z-index: 9999;
      background-color: white;
      margin-left: -16px;
      box-shadow: 0px 0px 4px 0px rgba(11, 20, 40, 1);
      div {
        position: sticky;
        width: 100%;
        top: 100px;
        text-align: center;
        font-size: 20px;
      }
    }

table中配置

import Mask from '@/components/Mask'

const columns = [
    {
      title: '列1',
      dataIndex: 'column1',
      width: 320, 
      render: (_, record, index) => {
      if (index === 0) { // 从第一行开始
	      return <Mask rangeCol=[0, 1] /> // 代表第一列和第二列没有查看权限
	      }
		}
    },
    {
      title: '列2',
      width: 240,
      dataIndex: 'column2', 
    },
    {
      title: '列3',
      width: 240,
      render: (_, record, index) => <div>列3数据可查看</div>,,
    },
  ];

实现思路二：（推荐~）

1. 将需要添加蒙层的第一列合并行、列占满蒙层
2. 将蒙层中除第一列外行、列均设置为0

总代码

import React, { useEffect } from 'react';
import styles from './index.less';
import { Table } from 'antd';

// 宽度和表格列宽度一致
const defaultBgPlace = [{ width: 400 }, { width: 400 }];
export default function index() {
  // 背景模糊占位
  const [bgPlace, setBgPlace] = React.useState(defaultBgPlace);

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      width: 400,
      onCell: (_, index) => ({
        colSpan: index === 0 ? 2 : 0,
        rowSpan: dataSource.length,
      }),
      render: () => (
        <div className="mask">
          <div className="bg-place-wrap">
            {bgPlace?.map((item, index) => (
              <span
                key={index}
                className="bg-place"
                style={{ width: `${item.width}px` }}
              >
                xxx{index}
              </span>
            ))}
          </div>
          <div className="view">点击查看</div>
        </div>
      ),
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      width: 400,
      onCell: (_, index) => ({
        colSpan: 0,
        rowSpan: 0,
      }),
    },
  ];
  const dataSource = [
    {
      key: '1',
      name: '小明',
      age: 18,
      address: '北京市朝阳区芍药居',
    },
    {
      key: '2',
      name: '小张',
      age: 18,
      address: '北京市朝阳区芍药居2',
    },
  ];

  useEffect(() => {
    // 循环生成对应行数蒙层数据
    let data: any = [];
    dataSource?.forEach((item) => {
      data.push(...bgPlace);
    });
    console.log(data);
    setBgPlace(data);
  }, []);

  return (
    <div className={styles.container}>
      <Table columns={columns} dataSource={dataSource} pagination={false} />
    </div>
  );
} 

// css
.container {
  :global {
    .mask {
      // 为了宽高占满cell
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      .bg-place-wrap {
        .bg-place {
          // 处理背景模糊
          display: inline-block;
          min-height: 55px;
          filter: blur(4px);
          padding: 10px 20px;
          box-sizing: border-box;
        }
      }
      .view {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: blue;
        cursor: pointer;
      }
    }
  }
}