ProTable的简易查询模式下级联查询选框样式不一致的解决思路

本文链接：https://blog.csdn.net/weixin_67150966/article/details/139327996

采用的ProTable如下：

<ProTable
   size="small" //表格为紧凑型
   rowClassName={(record, index) => (index % 2 === 0 ? '' : 'zebra-stripe')} //增加斑马条纹就这么一句话
                actionRef={actionRef}
                rowKey="id"
                search={{
                  filterType: 'light', //轻型搜索功能
                }}
                columns={columnList}
                request={rule}
               
/>

先看问题现状：

同样是查询框，柜号的选框是隐藏的，但是回路号的选框是显示的。问题原因在于二者是级联关系。

      {
        title: '柜号',
        dataIndex: 'containerCode',       
        valueType: 'select',       
      },

      {
        title: '回路号',
        dataIndex: 'loopCode',
        valueType: 'select',
        request: getLoops, //动态获取回路号，返回对象数组[{label:'',value:''}]      
        dependencies: ['containerCode'],  //回路号依赖柜号  
      },

解决思路：去掉dependencies。但要实现级联效果，势必要给柜号增加change事件。同时采用useState和useMemo来保证对change的即时响应。

//首先定义变量
const [sContainer,setSContainer]=useState("")

//ProTable的columnList方法：
 const columnList = useMemo(() => {   
    return genColumnList({
      sContainer,
      setSContainer,
    });
  }, [sContainer]);

在接口文件js中：

export function genColumnList({
  sContainer,
  setSContainer
}) {
  let list = [
    //其他字段声明
    //...
    {
        title: '柜号',
        dataIndex: 'containerCode',
        valueType: 'select',       
        fieldProps: {
          placeholder: '请选择',
          onChange: (val) => {
            setSContainer(val);            
          },
        },
      },

      {
        title: '回路号',
        dataIndex: 'loopCode',
        valueType: 'select',
        request: getLoops,//动态获取回路号，返回对象数组[{label:'',value:''}]   
        params: {containerCode:sContainer },
        // dependencies: ['containerCode'], //回路号依赖柜号  
        
      },
      //其他字段声明
    //...
];
  return list;
}

简单来讲，就是用父级的onchange事件+子级的params属性，代替原来子级的dependencies。

好了，看效果：