element项目中遇到的小问题总结

在用element UI框架做项目时遇到的问题，现在总结记录下来，此文档持续更新中…

1、日期选择器el-date-picker赋值后再次修改时页面不回显

<el-date-picker @input="changeDateRange"
	v-model="form.dateRange"
	type="daterange"
	value-format="yyyy-MM-dd"
	range-separator="至"
	start-placeholder="开始日期"
	end-placeholder="结束日期">
el-date-picker>

data() {
	form:{
		dateRange:[]	
	},
},
created() {
	this.form.dateRange = ['2025-03-03','2025-04-03'];
},
methods: {
	changeDateRange(e) {
		this.$forceUpdate();    //需要使用强制更新
		this.form.dateRange = e;   //赋值
	},
},

2、表单中需要显示必填*，但又不需要验证，添加required属性并且不设置prop属性

<el-form :model="form" :rules="rules" label-width="auto">
	<el-form-item label="标题" required>
		<el-input v-modal="form.title">el-input>
	el-form-item>
	<el-form-item label="名称" required>
		<el-input v-modal="form.name">el-input>
	el-form-item>
el-form>

3、输入框监听只能输入两位小数以及整数（需要监听的输入框数量多时可使用，数量少时直接用watch就行）

<el-input v-model="form.price" @input="(value)=>{changeFixedTwo(value,form,'price')}">el-input>

<el-input v-model="form.num" @input="(value)=>{changeInt(value,form,'num')}">el-input>

// 输入时修改，正整数
changeInt(value,row,name) {
	if (typeof value != 'string') {
		value = value.toString();
	}
	value = value.replace(/\-|\+|\./ig, "");
	value = value.replace(/\D/ig,"");
  	if (value) {
    	value = Math.abs(parseInt(value));
    	this.$nextTick(function(){
    		row[name] = value;
    	})
	}else{
    	this.$nextTick(function(){
    		row[name] = "";
    	})
  	}
},
// 输入时修改，保留两位小数的正数
changeFixedTwo(value,row,name) {
	if (value&&value!=".") {
		if (typeof value != 'string') {
			value = value.toString();
		}
		value = value.replace(/\-|\+|[^0-9\.]/ig, "");
		value = value.replace(/(\d+)\.(\d{1,2}).*$/, '$1.$2');
		this.$nextTick(function(){
			row[name] = value;
		})
	}else{
		this.$nextTick(function(){
			row[name] = "";
		})
	}
},

4、get请求传递参数名相同的值(list)

例如:

http://test.group/request?name=1&key=1&key=2&key=3

下载插件qs

npm install qs

引入qs

import qs from 'qs'

请求参数时处理

let form = {
	name:"1"
	key:['1','2','3']
}
// 直接将参数转换成URL的形式，可以拼接在接口地址后直接使用
let params = qs.stringify(form, {arrayFormat: 'repeat'})