vue + element 项目实战

最新推荐文章于 2021-11-01 12:57:46 发布

良言SE

最新推荐文章于 2021-11-01 12:57:46 发布

阅读量971

点赞数

本文链接：https://blog.csdn.net/qq_32265719/article/details/94390414

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

element-upload

<el-upload style="display: inline-block; margin-right: 13px"  action=""
         :http-request="importExcel"
         :before-upload="beforeAvatarUpload"
         :show-file-list="false"><el-button  type="success">上传</el-button>
</el-upload>

methods: {

	// 交互 await-async
	async importExcel(data){
		let fileFormData = new FormData();
		fileFormData.append('file', data.file);
		const result = await Model.importExcel(fileFormData);
		if(result){
			this.importInfo = result;
			let msg =`当前导入成功${this.importInfo.succeed}条，导入失败${this.importInfo.fail}条`
			this.$message({type: 'success', message: msg});
		}else{
			this.$message({type: 'warning', message: '请检查导入报表'});
		}
		this.dataList();//刷新表格
	},
	beforeAvatarUpload(file){
		const fileName = file.name;
		const isExcel = fileName.substring(fileName.lastIndexOf(".")) === '.xls'
			|| fileName.substring(fileName.lastIndexOf(".")) === '.xlsx';
		if(!isExcel){
			this.$message({type: 'warning', message: '请选择Excel文件!'});
		}
		return isExcel;
	},
}

element-datePicker 处理

<el-date-picker type="date" placeholder="强制执行时间"
                v-model="rowData.dSqqzzxrq" 
                :clearable="false"
                :picker-options="c_qzzxDate"></el-date-picker>

computed:{
    c_qzzxDate(){
        let self = this
        return {
            disabledDate(time){
                return time.getTime() <= new Date(self.rowData.dPjsxrq)//强制执行时间 限制
            }
        }
    },
},

vue 实例属性常用方法

常用属性

vm.$options //  选项参数
vm.$el
vm.$data
vm.$children // 局部组件    keep-alive  组件缓存
vm.$refs // 组件注册

常用方法

vm.$set() //  生命周期钩子函数
vm.$delete() //  生命周期钩子函数
vm.$mount() //  生命周期钩子函数
vm.$destroy()
vm.$watch(vm.$data.msg,(oldVal,newVal)=>{
console.log('msg newVal原值：' + oldVal,'msg 新值：' + newVal);
})
vm.$nextTick(()=>{
console.log("DOM更新完成，更新完成后再执行此代码")
})

this.$message({type: 'fail', message: "文件预览失败",});
this.$emit('OperateModelFlag'); //关闭弹窗
this.$refs[formName].validate();
this.$refs.AuditReason.initModel(opt,type); // 调用组件的方法
this.$confirm(msg, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    dangerouslyUseHTMLString:true,
    type: 'warning'
}).then(()=>{
    console.log('点击确定执行代码')
}).catch();

vue slot 内容分发

<template slot-scope="scope">
	<el-button @click="deleteAction(scope.row)" type="text" size="small" v-if="false">删除</el-button>
	<el-button @click="openUpdateInfo(scope.row)" type="text" size="small" :disabled="scope.row.nHxbz =='1'">修改</el-button>
  </template>
</el-table-column>

浏览器内核和html页面兼容

许多情况如果开发的页面只是内部的成员自己应用，则只要在一种浏览器中显示功能正常即可；
如果开发的网站是面向用户的，则要考虑到用户的使用的浏览器的不同，则要做到主流的浏览器中，页面的功能均可以正常使用。

浏览器的解析内核的区别

目前浏览器内核主流（前2个），chrome【WebKit v8 Blink 2013】和IE【Trident 1997】 FireFox【Gecko 1998】
Opera【Presto，->Webkit，->Blink 1995->2013】
浏览器内核，也被称为排版引擎（layout engine）、渲染引擎（rendering engine）。

常见浏览器

QQ浏览器、Firefox等与IE的解析内核相同，而360、sarfari等浏览器的解析内核与chrome相同

el 表单添加验证和清除验证

close(formName){
	this.operForm = Object.assign({},this.formInit); // 初始化数据
	this.clearFileList();
	if(this.$refs[formName]){this.$refs[formName].resetFields()} // resetFields
	this.$emit('OperateModelFlag'); //关闭弹窗
},

clearInit(){
	this.saveFlag ="";
	this.fileList = [];
	this.operForm=Object.assign({},this.parameterInit); //  obj  copy
	this.visable = true; 
	this.showFlag = false;
	setTimeout(() => {
		this.$refs.operForm.clearValidate()
	}, 1)
},

el-table 多级表头

<el-table-column label="过程评价" align="center">
	<el-table-column prop="nPjHgjcdf" label="合规检查评价得分"></el-table-column>
	<el-table-column prop="nPjMxhcdf" label="模型信息核查评价得分"></el-table-column>
	<el-table-column prop="nPjKjjhdf" label="会计稽核评价得分"></el-table-column>
	<el-table-column prop="nPjAqbwdf" label="安全保卫评价得分"></el-table-column>
	<el-table-column prop="nPjXdzcdf" label="信贷资产质量"></el-table-column>
	<el-table-column prop="nPjZdydf" label="自定义评价得分"></el-table-column>
</el-table-column>

ele-table 写法表格列数据条件展示

<el-table :data="tableData" :height="tableHeight"
		  highlight-current-row
		  @current-change="handleCurrentChange_table"
		  border style="width: 100%">
	<el-table-column prop="nYwid" label="序号" :key="1" v-if="false"></el-table-column>
	<el-table-column prop="cDbbt" label="标题" :key="2"></el-table-column>
	<el-table-column prop="dScrq" label="上传时间" :key="3" :formatter="formatterDate"></el-table-column>
	<el-table-column prop="cJgmc" label="发布机构" :key="4"></el-table-column>
	<el-table-column prop="nYggh" label="发布人工号" :key="5"></el-table-column>
	<el-table-column prop="cYgmc" label="发布人名称" :key="6"></el-table-column>
	<el-table-column prop="cWjlxmc" label="录入格式" :key="7"></el-table-column>
	<el-table-column label="原因" key="8.1">
		<template slot-scope="scope">
			{{(scope.row.nSqbz=='2')?scope.row.cJdxx:""}}
		</template>
	</el-table-column>
	<el-table-column prop="nSqbz" label="审核状态" :key="8">
		<template slot-scope="scope">
			<p v-if="scope.row.nSqbz=='0'">
				待审核
			</p>
			<p v-else-if="scope.row.nSqbz=='1'" style="color:#67C23A">
				审核通过
			</p>
			<p v-else-if="scope.row.nSqbz=='2'" style="color:#F56C6C">
				审核不通过
			</p>
		</template>
	</el-table-column>
</el-table>

一个写公共方法的地方

import moment from 'moment'
/***
 * 预览
	url =`${serverHost}${cXdlj}?tocken=${tocken}`
	url ="serverHost + scope.row.cXdlj + '?token=' + token"
	previewAction(url)
*/
const  previewAction = async  (url)=>{
	//<a :href="serverHost + scope.row.cXdlj + '?token=' + token" target="_blank">预览</a>
	const elink = document.createElement('a');
	elink.target = "_blank";
	elink.style.display = 'none';
	elink.href = url;
	document.body.appendChild(elink);
	elink.click();
	document.body.removeChild(elink);
}
//导出Action  下载
const exportAction = (fileName,blob) =>{
	if('download' in document.createElement('a')){// 非IE下载
		const elink = document.createElement('a');
		elink.download = fileName;
		elink.style.display = 'none';
		elink.href = URL.createObjectURL(blob);
		document.body.appendChild(elink);
		elink.click();
		URL.revokeObjectURL(elink.href);//释放URL对象
		document.body.removeChild(elink);
	}else {// IE下载
		navigator.msSaveBlob(blob, fileName);
	}
}

const convertBase64UrlToBlob = (urlData) => {
	let bytes=window.atob(urlData);        //并转换为byte
	//处理异常,将ascii码小于0的转换为大于0
	let ab = new ArrayBuffer(bytes.length);
	let ia = new Uint8Array(ab);
	for (let i = 0; i < bytes.length; i++) {
		ia[i] = bytes.charCodeAt(i);
	}
	return new Blob( [ab] , {type : 'image/png'});
}



export default {
	previewAction,
	exportAction,
	convertBase64UrlToBlob
}

功能背景：双击查看词条详情

element 表格 @row-dbclick="openWtctInfo"
获取当前列 row

//获取当前行数据
handleCurrentChange_table(row){
	this.currentRow=row;
},
//词条详情 @row-dblclick = "openWtctInfo"
openWtctInfo(){
	this.operateModelFlag = true; //显示详情
	this.$refs.wtctInfo.initModel(this.currentRow); // 调用组件的方法
	this.selectWtctInfo();
},

问题背景：使用 ele Tree 时第一次加载无法加载树节点

setCheckedNodes()方法
this.$nextTick()会在dom更新之后在执行回调

showYgTree(){
	//this.$nextTick()会在dom更新之后在执行回调
	this.$nextTick(function() {
		if(this.operForm.ygTreeList){
			if(this.$refs.ygTree){
				this.$refs.ygTree.setCheckedNodes(this.operForm.ygTreeList)
				this.operForm.ygTreeListNum =(this.operForm.ygTreeList.length>0)? this.operForm.ygTreeList.length:"";
			}
		}
	})

},

vue-package.json
npm 创建package.json文件

npm install --yes
npm install
npm install -save
npm install -save-dev
npm packagename
npm packagename -dev

vue-package-lock.json 每次执行完npm install之后会对应生成package-lock文件，该文件记录了上一次安装的具体的版本号
webpack-config.js 热更新，和相关路径全局变量配置

this.$alert()
this.$message()
this.$route

vue 表单验证 ele

resetFields 清除表单验证

this.$refs 用法用于 ref绑定之后，vue实例操作dom（一般是子组件）

this.emit() 用法

export default{
    name:'',
    components: { },
    data(){return{}},
    methods:{
        //清除表单验证 -调用组件方法 this.$refs.refName.todo();
        clear(formName){
            this.$refs[formName].resetFields(); //变量
        },
        //刷新表格 -给子组件调用的方法
        reload(){
             this.$emit('getYwqxList');
        },
    
    }
}

https://blog.csdn.net/weixin_37953807/article/details/83544527

//代码：
const router = new Router({
  mode: 'history',
  routes: routes
})

这种模式充分利用了history.pushState API来完成URL的跳转而不需要重新加载页面。
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
在实例化路由模块时，添加mode属性为‘history’，这样地址栏的“#”号就会消失。
但是当刷新页面是就会出现404，这时候就需要server端的配合，当页面为404时默认指向index.html
server过滤器(java)

vue 路由语法

// route-views 组件
import Welcome form ''
//子组件
const groupPerformanceList = () => import('')
// js 配置路由
export default {
    path: '/statis',
    component: Welcome,
	//嵌套组件
    children: [
        //小组统计
        {
            path: '/statis/groupPerformance',
            component: groupPerformanceList,
            meta: {
                title: '小组统计',
                isMenu: true,
                name: 'groupPerformanceList'
            },
        },
    ]
}

路由中有三个基本的概念 route, routes, router。

route，它是一条路由。
routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。
router 是一个机制，相当于一个管理者，它来管理路由。[处理路由数组和页面得映射关系]

const routes = [] //定义
const flatten = (config = []) => {
  // 一组
  config.forEach((item) => {
    // 一个
    const route = {
      path: item.path,
      component: item.layout || HeaderAsideLayout,
      children: [
        {
          path: '',
          name: item.name,
          component: item.component,
          redirect: item.redirect,
          meta: item.meta
        }
      ]
    }
    if (Array.isArray(item.children)) {
      flatten(item.children)
    }
    routes.push(route)
  })
  return routes
}//处理
export default flatten // 导出

this.$router

methods:{
    //修改密码跳转
    updatPassword(){
	    //跳转
	    this.$router.push("/password") 
    },
}

良言SE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue + element 项目实战

element-upload<el-upload style="display: inline-block; margin-right: 13px" action="" :http-request="importExcel" :before-upload="beforeAvatarUpload" :show-file-list="...
复制链接

扫一扫