Vue+element-ui - 项目常用方法

1. 检查邮箱格式

export function validationEmail(email) {
    var regEmail = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
    if(email == null || email.length == 0) {
        return false;
    }
    if(!regEmail.test(email)) {
        return false;
    }
    return true;
}

2. 去除空格

export function trim(str) {
    return str.replace(/(^\s*)|(\s*$)/g, "");
}

3. 判断字符串是否全为数字组成

export function isAllNumber(str) {
    return /^\d+$/.test(str);
}

4. 数据库读取datetime类型，显示GMT格式

例子：星期 月 日 00:00:00 GMT +8:00 年

在显示前，调用以下方法进行处理：

export function renderTime(date) {
    var dates = new Date(date).toJSON();
    return new Date(+new Date(dates) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') 
}

5. ElementUI表格多选框选择的行中，获取某个属性的全部数据

export function getMultiple(orderArray) {
    var array = [];
    for(var i = 0; i < orderArray.length; i++) {
        array[i] = orderArray[i].属性名;
    }
    return array;
}

注意：

• 参数orderArray是element-ui表格中的multipleSelection
• 代码中的属性名，按自己需要进行修改
• 返回值是所有选中的行指定属性的值数组

6. ElementUI - 根据值显示不同的标签

6.1 页面代码

<el-tag v-for="(item,index) in stateMap" v-show="state == item.value" :key="index" :type="item.cssName">
    {{item.label}}
</el-tag>

6.2 JS代码

stateMap: [
   { label: '标签四', value: 0, cssName: 'warning' },
   { label: '标签三', value: 1, cssName: 'info' },
   { label: '标签二', value: 2, cssName: 'success' },
   { label: '标签五', value: 3, cssName: 'danger' }
],

注意：

• state 和 value 的比较，除了值要一样之外，类型也要一致
• state 是控制标签显示不同种类的值

7. ElementUI - 下拉框联动

7.1 页面代码

示例：选择院系，专业下拉框显示该院系下对应的专业

<el-form :model="dataForm" @submit.native.prevent>
	<el-form-item label="所属院系" :label-width="formLabelWidth">
		<el-select v-model="dataForm.department" placeholder="请选择所属院系" @change="selectDep" class="elselect">
			<el-option v-for="item in departmentList" :label="item.departmentName" :value="item.id" :key="item.id"></el-option>
		</el-select>
	</el-form-item>
	<el-form-item label="负责专业" :label-width="formLabelWidth">
		<el-select v-model="dataForm.professional" placeholder="请选择专业"  class="elselect">
			<el-option v-for="item in options" :label="item.professionalName" :value="item.id" :key="item.id"></el-option>
		</el-select>
	</el-form-item>
</el-form>

7.2 JS代码

<script>
    export default {
        data() {
            return {
                formLabelWidth: '120px',
                dataForm: {
                    department: '',
                    professional: ''
                },
                departmentList: [  //  系别信息
					id: '',
					departmentName: ''
				],
                professionalList: [  //  专业信息
					id: '',
					forDepartment: '',
					professionalName: ''
				],
				options: [],  //  专业下拉框显示的数据
            }
        },
         methods: {
			selectDep(val) {
				var that = this;
				let pros = [];
			    for(var obj of that.professionalList) {
			        if(val === obj.forDepartment) {
			            pros.push({professionalName: obj.professionalName, id: obj.id})
			        }
			        that.options = pros;
			    }
			}
		}
    }
</script>