vue配置element使用記錄

*.初始化vuejavascript

//********************js部分********
var app;
window.onload=function(){
	initVue();
};
function initVue(){
	app = new Vue({
		el: '#app',//對應html中的id爲app
		data: {
		},
		methods: {
		},
		watch: {
			
		},
	})
}

<!--html部分-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge ;chrome=1"/>
	<title>xxx</title>
	<!--引入elment相關js和css-->
	<link rel="stylesheet" type="text/css" href="../../assets/element-ui/lib/theme-chalk/index.css"/>
	<script src="../../assets/element-ui/pack.js"></script>
	<script src="../../assets/element-ui/lib/addons.js"></script>
	<script src="js/archiveManager.js"></script>
</head>
<body>
<!--這裏的id和js中的相一致-->
<div id="app">
	
</div>
</body>
</html>

*.elemnt中單選框label爲傳入後臺的值,這裏頁面顯示的"是/否"，傳入後臺的是'Y/N'css

<el-form-item label="是否覈准" prop="checkFlag">
	<el-radio-group v-model="archiveSelect.checkFlag">
		<el-radio label="Y">是</el-radio>
		<el-radio label="N">否</el-radio>
	</el-radio-group>
</el-form-item>

*.表單中自定義展現,scope.row 爲當前行的全部數據html

<el-table-column label="一級資料">
	<template slot-scope="scope">
		<div>歸檔:
			<el-link type="success" @click="toArchive(scope.row.busino,archiveType.archiveOneNo)">{{formatArchiveType(scope.row,'archiveOneNo')}}</el-link>
		</div>
	</template>
</el-table-column>

*.在任意片調用vue屬性或方法,參考上方{{}}的調用方式，上圖的formatArchiveType爲vue中的方法vue

*.屬性中的值用字符串和後臺值拼接,這裏的href就是採用的拼接方式，字符串用音引號，後臺參數用+號拼接java

<el-link type="primary" :underline="false" 
 :href="'viewFile.html?busino='+selectBusino+'&fileType='+archiveSelect.fileTypeCode"
 target="_blank">查看圖片</el-link>

*.爲後臺參數對象添加屬性,主要用於初始不存在的屬性，而html中又要使用的，這種方式html中才會生效，這裏的app參考第一條的初始化vue。chrome

app.$set(app.archiveSelect,"archiveNum",ret.archiveNum);//爲chiveSelect添加archiveNum屬性

*.el-select示例element-ui

<el-select v-model="param.archiveType">
                    <el-option  label = "一級資料" value="archiveOneNo"></el-option>
                    <el-option label="二級資料" value="archiveTwoNo"></el-option>
                    <el-option label="權證資料" value="archivePaperNo"></el-option>
                    <el-option label="貸後資料" value="archiveLoanNo"></el-option>
                </el-select>