vue + ElementUI 一些问题总结

一、阻止回车默认行为

1. ElementUI el-input框添加回车事件 @keyup.enter.native=""
2. ElementUI 点enter回车搜索 ，发现地址栏后面多了个？,不触发搜索方法，而直接刷新页面了！这是由于 W3C 标准中有如下规定：

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form. 即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加 @submit.native.prevent

<el-form ref="form" :model="pageQuery" @submit.native.prevent>
  <el-form-item>
    <el-input 
        placeholder="请输入专业术语"
        v-model.trim="pageQuery.title"
        clearable
        @keyup.enter.native="searchList"
     ></el-input>
  </el-form-item>
</el-form>

二、elementui表格单行改变颜色

// 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。
:row-style="getClass"
// 过期的人员颜色变成灰色  ---->  Function({row, rowIndex})/Object
getClass （{ row, rowIndex }) {
    if (row.validUntil !== '') {
        if (1 > 2) {
            return { 'background-color': '#f5f5f5', 'color': '#CDC5BF' }
        }
    }
}

 

三、vue前端做分页方法

// 下面是封装的方法使用的参数
:pager-config="PagerConfig"
@page-change="handlePageChange"

data () {
    return {
        // 表格分页配置
        PagerConfig: {
            pageNum: 1,
            pageSize: 15,
            total: 0,
            layouts: ['Size', 'PrevPage', 'Number', 'NextPage', 'Total']
        }
    };
}
// 表格分页改变方法
handlePageChange (page) {
    let currentPage = 0, pageSize = 0;
    if (page === undefined) {
        currentPage = this.PagerConfig.pageNum;
        pageSize = this.PagerConfig.pageSize;
    } else {
        currentPage = page.pageNumber;
        pageSize = page.pageSize;
    }
    let form = (currentPage - 1) * pageSize;
    let to = currentPage * pageSize;
    this.PagerConfig.pageNum = currentPage;
    this.data = [];
    for(; from < to; from++) {
        if (this.toData[from]) {
            this.data.push(this.toData[from]);
        }
    }
}

 四、对ElementUI的Pagination 分页进行封装的组件

<template>
    <el-pagination
        class="g-pagination-wrap background
        ref="ref_super-pagination"
        :style="{'text-align': align}"
        :layout="layout"
        :small="small"
        :pager-count="pagerCount"
        :size="size"
        :page-sizes="pageSizes"
        v-bind="paginationProps"
        @prev-click="onPrevClick"
        @next-click="onNextClick"
        @current-change="onCurrentChange"
        @size-change="onSizeChange">
    </el-pagination>
</template>

<script>
	export default {
		name: 'GPagination', 
		props:{
			align: {
				type: String,
				default: 'right',
			},
			small:{
				type:Boolean,
				default: true,
			},
			size: {
				type: String,
				default:'mini"
			},
			pagerCount: {
				type:Number,
				default:5,
			},
			layout: {
				type: String,
				default: 'total, sizes, prev, pager, next, jumper',
			},
			pageSizes:{
				type:Array,
				default:()=> {
					return [ 15,30,50,100,150,200,300];
				}
			}
		},
		data () {
			return {
				pNum:1,
				pSize:10,
				paginationProps: {},
				height:36
			};
		},
		watch:{
			$attrs: {
				immediate: true,
				deep:true,
				handler(val){
					let props = Object.assign({}, val);
					if (props.pageNum){ 
						props.currentPage = props.pageNum;
					}
					if (typeof props.total === 'string') {
						props.total = Number(props.total);
					}
					this.pNum = props.currentPage;
					this.pSize = props.pageSize;
					this.paginationProps = props;
				}
			}
		},
		created(){
			let { $attrs } = this,
			this.pNum = $attrs.pageNum || $attrs.currentpage;
			this.pSize = $attrs.pageSize;
		},
		methods:{
			onSizeChange(pageSize){
				this.pSize = pageSize;
				this.$emit('size-change', pageSize);
				this.$emit('update:pageSize', pageSize);
				if(this.pNum > Math.ceil(this.paginationProps.total / pageSize)){
					return;
				}
				this.change();
			},
			onCurrentChange(pageNum){
				this.pNum = pageNum;
				this.$emit( 'current-change', pageNum);
				this.$emit('update:currentPage',pageNum);
				this.$emit('update:pageNum',pageNum);
				this.change();
			}，
			onPrevClick(pageNum){
				this.$emit('prev-click', pageNum);
			}，
			onNextClick(pageNum){
				this.$emit('next-click', pageNum);
			},
			change () {
				this.$emit('page-change',{ pageNumber: this.pNum, currentPage: this.pNum, pageSize: this.pSize });
			}
		},
		updated() {
			let height =this.$refs['ref_super-pagination'].$el.clientHeight;
			if(height != this.height) {
				this.$emit( 'updated', height);
				this.height = height;
			}
		}
	};
</script>
<style scoped>
	.g-pagination-wrap{
		background-color: #F8F8FA ;
		border: 1px solid #e8eaec; 
		padding:4px 5px;
		box-sizing:border-box;
	}
</script>

五、vue 父子组件生命周期执行顺序

• 父子组件加载渲染过程：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
• 子组件更新：父beforeUpdate->子beforeUpdate->子updated->父updated
• 父组件更新过程：父beforeUpdate->父updated
• 销毁：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

总结：父组件先于子组件created，而子组件先于父组件mounted

六、在项目中使用npm安装依赖的命令说明

在我们前端项目中经常会用到npm安装一些依赖，但是有时我们对一些命令所起的作用不是很清晰。

• npm install xxx：安装依赖到项目目录下，不会将模块依赖写入devDependencies或dependencies。

• npm install xxx -g：将依赖安装到全局，具体安装到哪个磁盘位置，主要是看npm cinfig prefix的位置。

• npm install xxx -save：安装依赖到项目目录下，并在package文件的dependencies节点写入依赖。

• npm install xxx -save-dev：安装依赖到项目目录下，并在package文件的devDependencies节点写入依赖。