技术栈

vue多页面形式。

问题

1、输入数值的时候需要显示千分位；
2、最大输入长度为12位；
3、改变输入框中的值，并获取改变后的值。

解决方法

因为在这里输入的是数值，所以用的是iview中的数字输入框（InputNumber）组件。
1、组件中提供了我们格式化的属性formatter和parser，利用formatter把数字转换为想要的千分位格式，再由parser转换加数字；
2、在这个组件中，没有maxlength属性，用max属性的话，超过了最大值就会显示最大值，也不是我想要的效果，所以就利用on-focus事件，改变输入框本身的属性来解决这个问题；
3、在这个问题上遇到了坑，本来是自用on-change来获取返回值，这个没错呀，平时的取值都是用的params.row.Qty，然后就把返回值赋值过来了 params.row.Qty = event，but数据并没有变化；后来把返回值直接赋值给了后端传过来的原始数据 appLayout.$data.tableDatas[params.index].Qty = event，over~

实例

<Table :columns="tableColumns" :data="tableDatas" border></Table>

tableColumns: [
	{
		title: '序号',
		type: 'index',
		width: 50,
		align: 'center'
	}，
	{
		title: '本次入库数',
		width: 100,
		key: 'Qty',
		align: 'right',
		render: (h, params) => {
			return h('InputNumber', {
				props: {
					value: params.row.Qty,
					min: 0,
					step: 1,
					precision: 0,
					formatter: value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
					parser: value => value.replace(/\\s?|(,*)/g, '')
				},
				on: {
					'on-focus': () => {
						$('input.ivu-input-number-input').attr({ 'maxlength': '12' });
					},
					'on-change': event => {
						appLayout.$data.tableDatas[params.index].Qty = event;
					},
				}
			});
		}
	},
],
tableDatas: []

参考文档：https://www.iviewui.com/components/input-number