原创 js防止多次點擊或重複點擊事件處理

1、預期實現效果:當點擊多次提交按鈕時,所綁定的提交事件會執行多次。現在我們需要阻止這一問題的發生。 2、期間,也試過多種方法: 使用定時器,讓其在2秒內執行一次。實踐下來,這個方法對於正常網速是沒有問題的,但是對於弱網情況下

原创 react-ant-design日期選擇框時間選擇限制

1、 預期效果 2、需要加的限制是不能開始時間不能小於一個日期,結束時間不能超過今天。 3、實現代碼 this.handleDisabledStartDate = current => { return

原创 react-js將時間字符串轉換爲時間戳進行時間比較

1、在我們需要進行時間比較時,獲取的是字符串形式的時間,需要和時間格式進行比較。這時候我們需要將時間兩種形式都轉換爲時間戳來進行比較。 具體時間戳怎麼定義的我也不清楚,但百度百科中有這麼一句:“時間戳是自 1970 年 1 月 1

原创 設置文本省略號移入顯示佈局不變完整完美解決方案

1、 .reject { float: left; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowra

原创 react-ant-design中用到的數組遍歷迭代方法forEach和map方法案例區分說明

1、forEach 注意的是forEach方法返回的是undefined。 實際運用 2、map 實際應用 能不能return一個值就是關鍵之處。

原创 react-ant-design實現Modal輸入框實現聯想輸入

1、預期實現效果 2、核心代碼 <div className={styles.opinionList} style={ideaList}> {opinionList.map((item,index)

原创 react-ant-design根據狀態不同顯示不同的狀態點和操作詳解

1、應用場景: 表格數據中,需要根據狀態不同顯示不同的狀態點或者操作 2、直接貼出代碼,至於一些狀態值需要怎麼取不再。。 狀態 { title: '狀態', dataIndex: 'stat

原创 React-antd日期選擇框日期初始化問題(invalid date)解決

1、 2、在使用日期選擇框的時候,當我們沒有進行初始化,並格式化日期時,會出現以下情況 3、解決方法: 在state初始化時給予日期值爲undefined 在日期選擇框中進行判斷 <DatePicker

原创 react-ant-design組件封裝抽取之表格頁面封裝舉例(組件封裝方法)

1、 需要封裝的組件包括兩個下拉框,一個搜索框,和一個表格列表 2、封裝的組件代碼 import React, { Component, Fragment } from 'react'; import { Card, Sel

原创 react-ant-design動態渲染可滑動表格組件

1、預期效果 當我們的表格所需要渲染的列數很多的時候,我們需要的是可滑動效果 2、所有的數據都是後臺渲染而來 首先需要的是給列固定寬度 在所使用的表格組件中加入scoll屬性

原创 react-ant-design表格組件列表數據渲染

1、需要渲染一個表格 2、這裏就不說表格頭部標題的渲染了,自己設置就行,直接講的是表格數據渲染 dataSource={data} 3、數據渲染 數組數據的來源於接口數據 拿到接口數據之後我們經過遍歷之後進行渲染 cons

原创 Ant Design的DatePicker組件禁用日期選擇範圍(結束日期大於開始日期)禁用狀態

1、日期選擇框 2、 <DatePicker disabledDate={this.disabledRegistrationStartDate} //這裏是設置時間選擇範圍

原创 jQuery-App輸入框實現實時搜索

1、實現實時搜索 其實原理就是很簡單,實時獲取輸入框的值即可,並且對不同情況操作進行不同處理。 2、 這裏只貼出主要事件語句代碼,具體一些操作要視具體情況而定 // 監聽搜索框的內容變化 實現實時搜索 $(".searc

原创 ant-design表格序號分頁連續自增設置

1、預期效果 2、設置表格的序號排序方式,我們首先是要到表格序號渲染的位置去修改 注意索引值需要+1 3、我所調用的方法是 所需要的參數是當前的頁數,當前頁的大小,和索引值 export function serialNumb

原创 react-antd-Table相似表格不同字段處理

1、當兩個表格字段相似時,但有一兩個字段不同,我們可以將不同的字段單獨以對象的形式抽出,根據情況push進去即可。 2、 代碼參考 const change = { title: '操作',