@aliretail/react-materials-components/demo/FilterSelectorDialog/nodialog.md

B 端物料组件库

---
title: 非弹窗筛选表格
order: 3
---

# 非弹出框方式

appCode 和 apiCode 也能访问，但是物料库中无法访问到接口正确显示内容暂时仅使用 url 的方式

具体选中之后 onChange 的参数可以打开控制台看参数

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { FilterSelectorDialog } from '@aliretail/react-materials-components';

class FullDataDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      appCode: 'retailforce_oms',
      apiCode: 'item_list_Items_at_page',
      url: 'https://rap2api.alibaba-inc.com/app/mock/6013/aliretail_materials/api/retailforce_oms/item_list_Items_at_page',
      selectedRowList: [{ code: 1 }]
    };
  }

  // 获取选中的数据
  getSelectedData = (data, btnId) => {
    console.log(data, btnId);
  };

  render() {
    // 测试数据
    const columns = [
      {
        title: '商品档案名称',
        dataIndex: 'goodsName',
        width: '40%',
      },
      {
        title: '所属一级类目',
        dataIndex: 'goodsEncode',
        width: '20%',
      },
      {
        title: '品牌',
        dataIndex: 'goodsEncode',
        width: '20%',
      },
    ];
    const filterConfigList = [
      {
        code: 'goodsName',
        codeName: '商品档案名称',
        inputPlaceholder: '请输入商品名称',
      },
      {
        code: 'goodsEncode',
        codeName: '商品档案编码',
        inputPlaceholder: '请输入商品编码',
      },
    ];

    const { btnVal, title, apiCode, appCode, url, selectedRowList } = this.state;

    return (
      <div>
        <FilterSelectorDialog.InnerForm
          columns={columns} // table表头
          filterConfigList={filterConfigList} // 下拉框data
          onSelected={this.getSelectedData} // 返回选中的item数组和id数组
          url={url}
          requestExtraParams={{
            extraName: 'name',
          }}
          hasTableBorder={false} // 表格不带边框
          // appCode={appCode}
          // apiCode={apiCode}
          mode="single" //是否多选
          primaryKey="code"
          selectedRowList={selectedRowList} // 按钮选中回显
        />
      </div>
    );
  }
}

class EmptyDataDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      url:
        'https://oneapi.alibaba-inc.com/mock/aliretail_materials/api/retailforce_oms/item_list_Items_at_page_multiple_empty',
    };
  }

  // 获取选中的数据
  getSelectedData = (data, btnId) => {
    console.log(data, btnId);
  };

  render() {
    // 测试数据
    const columns = [
      {
        title: '商品档案名称',
        dataIndex: 'goodsName',
        width: '40%',
      },
      {
        title: '所属一级类目',
        dataIndex: 'goodsEncode',
        width: '20%',
      },
      {
        title: '品牌',
        dataIndex: 'goodsEncode',
        width: '20%',
      },
    ];
    const filterConfigList = [
      {
        code: 'goodsName',
        codeName: '商品档案名称',
        inputPlaceholder: '请输入商品名称',
      },
    ];

    const { btnVal, title, url } = this.state;

    return (
      <div>
        <FilterSelectorDialog.InnerForm
          columns={columns} // table表头
          filterConfigList={filterConfigList} // 下拉框data
          onSelected={this.getSelectedData} // 返回选中的item数组和id数组
          url={url}
          mode="multiple" //是否多选
          primaryKey="code"
        />
      </div>
    );
  }
}

const App = () => {
  return (
    <>
      <p>单选框 有数据</p>
      <FullDataDialog /> <br />
      <p>多选框 无数据</p>
      <EmptyDataDialog />
    </>
  );
};

ReactDOM.render(<App />, mountNode);
```