*.初始化vue
//********************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'
<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 为当前行的所有数据
<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中的方法
*.属性中的值用字符串和后台值拼接,这里的href就是采用的拼接方式，字符串用音引号，后台参数用+号拼接
<el-link type="primary" :underline="false" :href="'viewFile.html?busino='+selectBusino+'&fileType='+archiveSelect.fileTypeCode" target="_blank">查看图片</el-link>
*.为后台参数对象添加属性,主要用于初始不存在的属性，而html中又要使用的，这种方式html中才会生效，这里的app参考第一条的初始化vue。
app.$set(app.archiveSelect,"archiveNum",ret.archiveNum);//为chiveSelect添加archiveNum属性
*.el-select示例
<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>