前端对页面中的 checked 选中状态的展示

项目中我们常常遇见多选，并且有场景要求 初次进入时展示全部的多选项，当选中后点击保存，在进来时，还是展示全部，但是要选中的默认选中，
这就要求前后台进行配合。
先看看页面效果

我们在主页面点击了场景项，进入场景页面进行选择并保存

当点击保存会返回到主页面 ，在进来时就默认选中了

在当我 点击主页面 的启用后，在点击主页面中的 场景 进来就是只展示选中的那几条

代码 ：
我们在页面中点击跳转页面的路由link地址

	{
      title: '采购场景',
      align: 'center',
      dataIndex: 'sceneName',
      render: (value, record, index) => {
     	// console.log(value, 'value是本身要展示的值'， record， ‘record是所有的row项’)
        return (
          <Button>
            <Link to={`/pur/purcSettlement/Buyer/detail/${record.id}`}>采购场景</Link>
          </Button>
        )
      }
    },

跳转页面之后
我们要再场景页面的index 页面中接收传过来的值 一般都是id

注意 enableFlag 是我们 启用按钮 的标志 要用它的

  enableFlag: boolean = false; //是否启用 首先给个没有启用的
  sceneIds: string[] = []; //已选中的id数组 自己定义一个存放选中的数组
  
  async componentDidMount() {
    this.setDefaultParams(this.props?.match?.params?.id);
  }
  setDefaultParams = async (id) => {
    const deitem = await service.getProcurementTypeId(id); //根据id获取详情页面展示接口
    console.log(deitem, '挂载完成就加载')
    if (deitem && deitem.data.enableFlag) { // 如果启用
      this.getListOption = {
        url: `/yst-fin/fin/purSettleDef/listScene`, // 查询已对应采购场景--启用之后的，也就是只展示选中的那几条。
        method: 'post'
      };
      this.enableFlag = true;
    } else { // 如果不启用，就展示全部，但是默认选中的
      this.enableFlag = false;
      this.sceneIds = deitem.data.sceneIds;
    }
  //  this.setState({ isInitFinish: true });
  };

 setDefaultSelectionData = (successTableRef) => {
    console.log(successTableRef, '/请求成功之后')
    if (!this.enableFlag && this.sceneIds?.length > 0) { // 判断启用，并且启用有长度
      const dataSource = successTableRef.dataSource; // 传过来的后台数据data[]
      const selectedRowKeys = []; // id项
      const selectedRows = []; // 所有的内容项
      this.sceneIds.forEach((itemid) => {
      // 这里用的是find()方法。
      // find()方法：给定条件，返回数组中第一个满足该条件的值，之后的值不再进行检测，当没有找到满足该条件的值时，返回undefined
        const row = dataSource.find((it) => it.id == itemid);
        if (row) {
          selectedRowKeys.push(itemid);
          selectedRows.push(row);
        }
      });
      const selectionData = {
        selectedRowKeys,
        selectedRows,
        length: selectedRowKeys.length
      };
      setTimeout(() => {
        this.tableRef?.setSelectionData(selectionData);
      }, 0);
    }
  };

// 保存按钮 --采购场景
  save = async (selectionData?: any) => {
    console.log(selectionData);
    const item = selectionData.selectedRows.map(
      ({ sceneCode, id, sceneName, es7 }) => ({
        sceneCode,
        sceneId: id,
        sceneName,
        es7
      })
    );
    console.log(item, '///item');
    let params = {
      defineId: this.props?.match?.params?.id,
      params: item
    };
    const res = await service.addScene(params);
    if (res && res.success === true) {
      this.setState({});
      ElNotification({ type: 'success', message: res.msg });
      const { store } = this.props
      store.MultiTabMobx.closeCurrentToPath('/pur/purcSettlement/Buyer'); // 返回主页面
    } else {
      ElNotification({
        type: 'error',
        message: res.msg
      });
    }
  };

	 render() {
	    return !this.state.isInitFinish ? null : (
	      <div>
	        <ElRowContainer blocks={[]} onBack={this.onBack} position='top' />
	        <ElSearchTable
	          tableId='mg_purc_mdata_purchasedPartsList'
	          rowKey='id'
	          mode={{
	            proxy: true,
	            search: true,
	            action: true,
	            pagination: false, // 取消分页
	            descriptions: true,
	            tabs: false
	          }}
	          pageSize={100} //传递100个
	          scroll={{ x: 1500 }}
	          tableProxy={{
	            request: async (paramData) => {
	              return service.getList(
	                // this.getListOption.url,
	                // this.getListOption.method,
	                this.getListOption.url = '/yst-pur/pur/purscene/search',
	                this.getListOption.method = 'post',
	                {
	                  ...paramData,
	                  defineId: this.props?.match?.params?.id,
	                  es3: 'NON', // 不免值
	                  size: 100,
	                  orders: [{ asc: false, column: 'createTime' }] //排序
	                }
	              );
	            },
	            successCallBack: (successTableRef) => { // 请求成功之后要执行的方法，在上边
	              this.setDefaultSelectionData(successTableRef);
	            },
	            errCallBack: (res) => {
	              message.error(res.msg || '操作失败');
	            },
	            props: {
	              success: 'success',
	              result: 'data.records',
	              total: 'data.total'
	            },
	            autoLoad: true
	          }}
	          actionButtons={getTableActionButtons(this.enableFlag, this.save)}
	          columns={getTableColumns()}
	          onRef={(ref) => (this.tableRef = ref)}
	          searchFormProps={{
	            // 搜索条件
	            items: getTableSearchFormItems()
	          }}
	          rowSelectionConfig={
	            // 控制显示和隐藏
	            this.enableFlag
	              ? null
	              : {
	                  type: 'checkbox',
	                  fixed: true
	                }
	          }
	        />
	      </div>
	    );
	  }