美文网首页
Reactjs+antdesign 如何实现数字千分位效果

Reactjs+antdesign 如何实现数字千分位效果

作者: 何家一枝花 | 来源:发表于2019-11-07 17:34 被阅读0次

    实现效果:

    数字千分位实现效果图

    实现方式:


    代码实现效果,处理数字千分位

    附代码:(省的一个个敲)

        formatNumber = (value) => {

            value += '';

            const list = value.split('.');

            const prefix = list[0].charAt(0) === '-' ? '-' : '';

            let num = prefix ? list[0].slice(1) : list[0];

            let result = '';

            while (num.length > 3) {

                result = `,${num.slice(-3)}${result}`;

                num = num.slice(0, num.length - 3);

            }

            if (num) {

                result = num + result;

            }

            return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;

        }

    千分位转化成正常数字结构

     nameOnChange = (e) => {

            console.log(e.target.value);

            let value = e.target.value

                ;

            this.setState({

                name: this.formatNumber(value.replace(/,/g, ''))

            })

        }

    真是可用,希望能帮到你,找了好久都没有发现可用真正使用的

    相关文章

      网友评论

          本文标题:Reactjs+antdesign 如何实现数字千分位效果

          本文链接:https://www.haomeiwen.com/subject/ihudnqtx.html