react ant protable自定義實現(xiàn)搜索下拉框

更新時間：2023年06月07日 16:01:03 作者：Sunny_Future

這篇文章主要介紹了react ant protable自定義實現(xiàn)搜索下拉框，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

react ant protable自定義搜索下拉框

背景

select選擇框很常見，這里實現(xiàn) react ant protable實現(xiàn)自定義搜索下拉框

coding

    const [selectEnum, setSelectEnum] = useState({});
    const asyncFetch = () => {
        fetch('https://localhost/api/search_list')
            .then((response) => response.json())
            .then((json) => setSelectEnum(json.data))
            .catch((error) => {
                console.log('fetch data failed', error)
            });
    };
    // 頁面刷新，自動發(fā)一次請求
    useEffect(() => {
        asyncFetch()
    }, []);
    // 防抖搜索設(shè)備
    const handleSearch = debounce((val)=> {
        const dispatch = async (params) => {
            console.log("params=", params)
            const data = await post("https://localhost/api/search_list", {
                body: params
            })
            if (data) {
                setSelectEnum(data)
            }
            return {
                data: Array.from(data),
                success: true,
            }
        }
        dispatch({
            search_key_worlds: val
        }).then()
    }, 1000)   
    const columns = [
        {
            title: "bookName",
            dataIndex: "bookName",
            hiddenInTable: true,
            initialValue: "Nginx大全",
            renderFormItem: () =>{
                // let list = [{"id": 0, "name": "Nginx大全"}, {"id": 1, "name": "Java從入門到精通"}]
                let list = Array.from(selectEnum);
                const options = list.map(item => <option key={item.id}>{item.name}</option>);
                return (
                    <Select
                        key="searchSelcet"
                        showSearch
                        placeholder="請輸入關(guān)鍵字搜索"
                        filterOption={false}
                        onSearch={handleSearch}
                    >   {
                        <>
                        <option key="" value="">全部</option>
                        </>
                    }
                        {options}
                    </Select>
                )
            }
        }
    ]

antd react ProTable 基本使用

antd 全稱 Ant Design, 是目前來說運(yùn)用最廣泛的 react 的 ui 框架, 下文就用略寫 antd 代替了

pro系列不做過多解釋, 畢竟ui框架大家也都得心應(yīng)手了, 好好看文檔幾乎沒毛病

個人分析

優(yōu)勢：antd react確實是非常強(qiáng)大的ui框架, 其中的內(nèi)容包含了前端幾乎所有的ui, 運(yùn)用此框架幾乎可以不用寫css樣式
劣勢：學(xué)習(xí)難度大, 網(wǎng)上教程相對較少, 一遇到bug, 比較難解決

安裝

1.安裝 antd

yarn add antd

2.安裝 pro-table 系列

官方網(wǎng)址: https://procomponents.ant.design/docs/getting-started

yarn add @ant-design/pro-table
// or
cnpm i @ant-design/pro-table --save
// 其他pro系列安裝
npm i @ant-design/pro-form --save
npm i @ant-design/pro-layout --save
npm i @ant-design/pro-table --save
npm i @ant-design/pro-list --save
npm i @ant-design/pro-descriptions --save
npm i @ant-design/pro-card --save
npm i @ant-design/pro-skeleton --save

這里要注意 antd 的版本問題, 最好采用4.0以上的版本分享下我現(xiàn)在使用的版本,

react版本 react@17.0.2 | MIT | deps: 2 | versions: 739 // npm info react
node版本 v16.4.2 // node -v
yarn版本 1.22.11 // yarn -version
dva版本 dva-cli version 0.10.1 // dva -v
nmi版本 ^2.9.0 // umi -v
antd版本 4.8.0
溫馨提示: 一般antd安裝之后, 普通的ui插件都能使用, 安裝pro后引用就報錯, 建議先替換antd版本, 直接在package.json中修改antd的版本, 然后刪除node_modules內(nèi)的文件, 重新 cnpm install 或者 yarn install

常用字段

1.columns 數(shù)組表格列的配置描述 (下圖紅框內(nèi)的配置)

columns = [
	{
		title:'名稱',// (必填) 顯示名稱
		dataIndex:'name',// (必填) 根據(jù)后臺接口, 需要顯示的字段
		width:48,// (選填) 展示的寬度
		valueEnum: {// (選填) 選擇某個選項, 點擊查詢按鈕可查詢, valueEnum 可展示單選框 status可不填 
      		0: { text: '全部', status: 'Default' },
      		1: { text: '關(guān)閉', status: 'Default' },
      		2: { text: '運(yùn)行中', status: 'Processing' },
      		3: { text: '已上線', status: 'Success' },
      		4: { text: '異常', status: 'Error' },
      		all:{ text: '全選' }
    	},
    	initialValue: 1,// (選填) valueEnum的默認(rèn)值
    	render: (_) => <a>{_}</a>,// (選填) 不在搜索時使用, 可嵌套標(biāo)簽展示數(shù)據(jù), 多用于三目運(yùn)算符展示比較復(fù)雜的數(shù)據(jù)
    	filterDropdown: () => (// (選填) 添加搜索條件, 此處以搜索框為例, 在表頭和表格上方均有篩選條件
     		<div style={{ padding: 8 }}>
        		<Input style={{ width: 188, marginBottom: 8, display: 'block' }} />
     		</div>
    	),
    	filterIcon: (filtered) => (// (選填) 有搜索時, 可重新定義表頭中的搜索icon
      		<SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
    	),
    	filters: [{text:'全選',value:'all'}],// (選填) 對某一列數(shù)據(jù)進(jìn)行篩選，使用列的 filters 屬性來指定需要篩選菜單的列
    	onFilter: (value, record) => record.name.indexOf(value) === 0,// (選填) 用于篩選當(dāng)前數(shù)據(jù)
    	defaultSortOrder:'ascend', // (選填) 默認(rèn)排列順序 ascend | descend
    	valueType: 'money', // (選填) 值的類型,會生成不同的渲染器 (舉例為金額)
	}
]

2.request 請求接口查詢數(shù)據(jù)

getData方法內(nèi)容

getData = (params)=>{
    const { dispatch } = this.props;
    dispatch({
      type: 'login/login',
      payload: {
        params
      },
      callback: (res) => {
        console.log(res)
      },
    });
  }

3.dataSource 表格展示的數(shù)據(jù), 如下面例子

// 使用 dataSource={[]}
[{"key":0,"name":"AppName","containers":11,"creator":"付小小","status":"running","createdAt":1641364688922,"money":0,"progress":47,"memo":"簡短備注文案"},{"key":1,"name":"AppName","containers":3,"creator":"林東東","status":"close","createdAt":1641364687979,"money":1538,"progress":8,"memo":"很長很長很長很長很長很長很長的文字要展示但是要留下尾巴"},{"key":2,"name":"AppName","containers":0,"creator":"曲麗麗","status":"close","createdAt":1641364688524,"money":1258,"progress":69,"memo":"簡短備注文案"},{"key":3,"name":"AppName","containers":12,"creator":"林東東","status":"close","createdAt":1641364688493,"money":4530,"progress":14,"memo":"很長很長很長很長很長很長很長的文字要展示但是要留下尾巴"},{"key":4,"name":"AppName","containers":18,"creator":"曲麗麗","status":"close","createdAt":1641364687837,"money":3432,"progress":65,"memo":"簡短備注文案"}]

4.pagination 分頁器

  pagination={{
        pageSize:2,// 每頁條數(shù)
        showQuickJumper: true,// 是否可以快速跳轉(zhuǎn)至某頁 (就是那個輸入框)
        // pageSizeOptions:[5,10,20,30,50,100],	指定每頁可以顯示多少條
        // position: 'bottom' // 'top' 分頁器顯示位置
      }}

5.toolbar 表格的標(biāo)題

  toolbar={{
        title: '高級表格',
        tooltip: '這是一個標(biāo)題提示',
      }}

6.toolBarRender 表格表頭上方的按鈕群

      toolBarRender={() => [
        <Button key="danger" danger>
          危險按鈕
        </Button>,
        <Button key="show">查看日志</Button>,
        <Button type="primary" key="primary">
          創(chuàng)建應(yīng)用
        </Button>,
        <Dropdown key="menu" overlay={menu}>
          <Button>
            <EllipsisOutlined />
          </Button>
        </Dropdown>,
      ]}