表格数据显示格式设置

微信公众号：前端程序猿之路
关注可了解更多的前端知识，反馈问题或建议，请公众号留言。
如果你觉得公众号内容对你有帮助，欢迎关注并转载

表格数据显示格式设置

表格行数据需要有一个显示格式设置列，具体实现为通过下拉框设置数据的显示格式，如下图，下拉框可以根据输入或者选择的小数位，来筛选对应的下拉框选项内容，选择某一个选项后，所选数据的内容相应的存储至当前行数据的formatType变量中，在展示数据时，根据当前行formatType对应的显示格式来格式化数据，从而实现表格数据显示格式的设置，其中formatType中包括，disim–小数位、divisor–除数、unitStr–单位、thousandSeparator–是否需要千分符。具体实现如下：

下拉框组件封装

<el-select v-model="formatVal" size="mini" clearable  @change="selectChange()" class="width-full" @visible-change="selectInput($event)">
        <div class="num-box"  @mouseenter="mouseover()" @mouseleave="mouseLeave()">
            <span class="num-input">小数位数</span>
            <el-input-number v-model="disimVal" controls-position="right" @input="selectInput($event)" :min="0" :max="6" :controls="controlsBoolean" class="num-component" :disabled="isDisabled"></el-input-number>
        </div>
        <div style="height: 41px;"></div>
        <el-option v-for="item in formatTypeList" :key="item.value" :value="item.value" :label="item.label"></el-option>
</el-select>
	
	
       // 下拉框数据选择
	   selectInput ($event) {
            if ($event === true) {
                this.disimVal = this.formatType.formatVal.disim
            }
            if (this.formatType.hasOwnProperty('isInitAdd') && this.formatType.isInitAdd === false) {
                this.formatVal = this.conversionOption()
            }
            this.formatTypeList = []
            this.formatTypeList = this.selectFormatList(this.disimVal)
        },
        selectChange () {
            this.formatType = getNewFormatType(this.formatVal, this.disim)
            this.$emit('modifyFormatType', this.formatType, this.formatVal)
        },
		
		// 小数位input-number右侧按钮设置
        mouseover () { //  移进显示
            this.controlsBoolean = true
        },
        mouseLeave () { // 移出不显示
            this.controlsBoolean = false
        },
		
        // 整型、数值型显示格式下拉框数据动态生成
        selectFormatList (disim) {
            let numberFormatTypeList = []
            if (disim !== undefined) {
                let normalValue = '1234.567891'
                let normalList = normalValue.substring(0, ((disim === 0) ? 4 : disim + 5))
                numberFormatTypeList.push({ 'value': normalList, 'label': normalList })
                let thousandList = this.formatThousandData(normalList)
                numberFormatTypeList.push({ 'value': thousandList, 'label': thousandList })
                let percentList = (normalList) * 100 + '%'
                numberFormatTypeList.push({ 'value': percentList, 'label': percentList })
            } else {
                numberFormatTypeList = []
            }
            return numberFormatTypeList
        },
		
		//	根据当前行formatType展示对应显示格式数据选项
        conversionOption () {
            let initialVal = '1234.567891'
            let disim = this.formatType.formatVal.disim //  小数位
            let divisor = this.formatType.formatVal.divisor //  除数
            let unitStr = this.formatType.formatVal.unitStr //  单位
            let thousandSeparator = this.formatType.formatVal.thousandSeparator //  需要千分位分隔展示
            initialVal = disim === 0 ? initialVal.substring(0, 4) : initialVal.substring(0, disim + 5)
            if (thousandSeparator) {
                initialVal = this.formatThousandData(initialVal)
            }
            if (this.formatType.showType === 'Persent') {
                initialVal = parseFloat((initialVal * 100) / (divisor * 100)) + unitStr
            }
            return initialVal
        },
		
        // 数值千分符转换
        formatThousandData (num) {
            var data = (num || 0).toString().split('.')
            data[0] = data[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
            return data.join('.')
        }