>source

나는Ant Design v2.x의 테이블 구성 요소 업그레이드 할 수 없습니다. 현재 일관성이 없기 때문에 행 편집 모드에서 숫자 서식을 변경하고 싶습니다. 디스플레이 모드에서는 원하는대로 독일어 서식이 있지만 클릭하면 edit , 숫자는 미국 소수 구분 기호로 형식이 지정됩니다.

테이블 구성 요소가Input-Number 구성 요소 매개 변수가있는 decimalSeparator 조정해야합니다.부모 (테이블) 구성 요소 열 속성에서 기본 입력 번호 구성 요소로 해당 매개 변수를 전달하는 방법은 나에게 전혀 분명하지 않습니다.

이를 증명하기위한 최소한의 코드 기반으로 다음의 Typescript 예제 코드를 살펴 보겠습니다.https://ant.design/components/table/#components-table-demo-edit-row 칼럼에 집중 age . 그것이 아니라고 가정 age , 오히려(예 : 거래). 스크린 샷의 두 번째 행에있는 (올바른) 형식은 render -다음과 같은 기능 :

x.toLocaleString("de-DE", { style: 'currency', currency: ccy, currencyDisplay: "code", maximumFractionDigits: 2 });

어디 x 형식화 할 값이며 ccy 표시 할 통화 문자열입니다. 스크린 샷에서는 비어있었습니다.

내가 무엇오전할 수있는 것은 열이 number , ㅏ string , 또는 다른 것. 예제 소스 코드에서 해당 부분은 다음과 같습니다.

interface Item {
  key: string;
  name: string;
  age: number;
  address: string;
}

여러분의 도움을 기대합니다!

  • 답변 # 1

    InputNumber 있다 formatterparser 통화 값의 형식을 지정하는 데 사용할 수있는 소품입니다.

    제가 권장하는 또 다른 쉬운 옵션은 입력 마스크를 사용하는 것입니다. 다음은 react-number-format과 관련된 예입니다.

    import React, { useState } from "react";
    import ReactDOM from "react-dom";
    import NumberFormat from "react-number-format";
    import { Table, Input, Form } from "antd";
    const EditableCell = ({
      editing,
      dataIndex,
      title,
      inputType,
      record,
      index,
      children,
      ...restProps
    }) => {
      const inputNode =
        inputType === "number" ? (
          <NumberFormat
            customInput={Input}
            thousandSeparator="."
            decimalSeparator=","
            decimalScale={2}
          />
        ) : (
          <Input />
        );
      return (
        <td {...restProps}>
          {editing ? (
            <Form.Item
              name={dataIndex}
              style={{
                margin: 0
              }}
              rules={[
                {
                  required: true,
                  message: `Please Input ${title}!`
                }
              ]}
            >
              {inputNode}
            </Form.Item>
          ) : (
            children
          )}
        </td>
      );
    };
    
    

    또한 여기에서 라이브 예제를 확인할 수 있습니다.

  • 답변 # 2

    시행 착오를 거쳐 마침내 나는 formatterparserInputNumber 구성 요소가 작동하면 https://2x.ant.design/components/table/에 문서가 거의 없었습니다.

    나는 정확히 예쁘지는 않지만 작동하는 다음을 수행했습니다.

    <InputNumber
      defaultValue={this.props.value !== null ? parseFloat(this.props.value) : null}
      // This is what 2x.antd.design suggests to do it:
      // formatter={value => ` ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
      // parser={value => value.replace(/\$\s?|(,*)/g, "")}
      // This my solution for German numbers
      formatter={value => ` ${value}`.replace(/\./,',').replace(/\B(?=(\d{3})+(?!\d))/g, '.')}
      parser={x => parseFloat(`${x}`.replace(/,/, '#').replace(/\./g, '').replace(/#/,'.')) }  
      onChange={this.handleChange}
    />
    
    

    의 아이디어 formatter 먼저 소수점 구분 기호를 대체하는 것입니다. ., . 그만큼 replace(/\B(?=(\d{3})+(?!\d))/g, ',') 전 세계적으로 모든 3 자리 그룹을 찾는 것입니다. \d{3} , 모든 종류의 천 구분 기호를 . , \B(?=(\d{3})+(?!\d)) 마지막을 제외한 모든 것을 찾습니다. , .

    상태 변수에 다시 쓰기 전에 this.props.value , 우리는 대체를 실행 취소해야하므로 먼저 쉼표를 소수 구분 기호로 일부 자리 표시 자로 대체합니다. # 을 누른 다음 모두 삭제 . 마지막으로 자리 표시자를 문자열로 되돌립니다. . 이해할 수있는 소수 구분 기호로 parseFloat .

  • 답변 # 3

    사용하시기 바랍니다 const formatValue = 값 =>value.toLocaleString ( "en-IN");

    fromate LocaleString에서 원하는 형식을 가져올 수 있습니다. ar-SA 아랍어 (사우디 아라비아) bn-BD Bangla (방글라데시) bn-IN Bangla (인도) cs-CZ Czech (체코) da-DK 덴마크어 (덴마크) de-AT 오스트리아 독일어 de-CH "스위스"독일어 de-DE 표준 독일어 (독일에서 사용됨) el-GR 현대 그리스어 en-AU 호주 영어 en-CA 캐나다 영어 en-GB 영국 영어 en-IE 아일랜드어 영어 en-IN 인도 영어 en-NZ 뉴질랜드 영어 en-US 미국 영어 en-ZA 영어 (남아프리카) es-AR 아르헨티나 스페인어 es-CL 칠레 스페인어 es-CO 콜롬비아 스페인어 es-ES Castilian Spanish (스페인 중북부에서 사용) es-MX 멕시코 스페인어 es-US 미국식 스페인어 fi-FI 핀란드어 (핀란드) fr-BE 벨기에 프랑스어 fr-CA 캐나다 프랑스어 fr-CH "스위스"프랑스어 fr-FR 표준 프랑스어 (특히 프랑스) he-IL 히브리어 (이스라엘) hi-IN 힌디어 (인도) hu-HU 헝가리어 (헝가리) id-ID 인도네시아어 (인도네시아) it-CH "스위스"이탈리아어 it-IT 표준 이탈리아어 (이탈리아에서 사용) ja-JP 일본어 (일본) ko-KR Korean (대한민국) nl-BE 벨기에 네덜란드어 nl-NL 표준 네덜란드어 (네덜란드에서 사용) no-NO 노르웨이어 (노르웨이) pl-PL 폴란드어 (폴란드) pt-BR 포르투갈어 (브라질) pt-PT 유럽 포르투갈어 (포르투갈에서 작성 및 사용) ro-RO 루마니아어 (루마니아) ru-RU 러시아어 (러시아 연방) sk-SK 슬로바키아어 (슬로바키아) sv-SE 스웨덴어 (스웨덴) ta-IN 인도 타밀어 ta-LK 스리랑카 타밀어 th-TH 태국어 (태국) tr-TR 터키어 (터키) zh-CN 중국 본토, 간체 문자 zh-HK 홍콩, 전통 문자 zh-TW 대만, 전통 문자

관련 자료

  • 이전 파이썬에서 in liner (한 줄) for loop를 사용하여 특정 부서 직원의 평균 급여를 계산하고 싶음
  • 다음 python - 여러 개의 numpy 배열에서 가장 가까운 세트 찾기