背景
项目中有20几个报表,每个报表页面中点击“查看审核日志”按钮时需要弹窗显示日志列表。这个功能代码量不大,但是如果每个页面复制粘贴过去,也是非常麻烦。一旦有修改,又要一遍遍改过去,于是封装了一个vue组件。
组件文件
src/compontents/AuditHistory.vue
<template>
<el-dialog title="审核记录" :visible.sync="showDialog" @open="onopen()" @close="onclose" >
<el-table :data="historyData" max-height="600">
<el-table-column property="createTime" label="时间" width="150"></el-table-column>
<el-table-column property="userName" label="人员" width="200"></el-table-column>
<el-table-column property="auditResult" label="审核结果"></el-table-column>
<el-table-column property="failReason" label="不通过原因"></el-table-column>
</el-table>
</el-dialog>
</template>
<script>
export default {
props:[
"visible", "tableName"
],
data() {
return {
showDialog:false,
historyData:[],
formLabelWidth: '120px'
};
},
components: {
},
methods:{
onclose(){
console.info("close")
this.$emit('onclose')
},
onopen(){
console.info("onopen")
//向后端请求数据
this.$http({
method: 'get',
url: '/get_auditReportData?tableName=' + this.tableName
}).then(res => {
console.log(res);
this.historyData=res.data;
this.visible=true;
}).catch(e => {
console.error(e)
this.$message.error(e.cause);
})
}
},
computed:{
},
watch:{
visible(){
this.showDialog=this.visible;
}
},
mounted(){
console.info("init")
}
}
</script>
要点
- 组件的页面和普通页面同样由
template
和script
组成 props
声明该组件支持的属性, 不要对组件的属性进行修改data
声明组件的数据,同一样变量不能同时存在于props和data:visible.sync="showDialog"
使用showDialog
来控制dialog的显示和隐藏,并且点击占上角的x时会改变showDialog
来关闭dialog,这也是为什么不用:visible.sync="visible"
的原因@open="onopen()" @close="onclose"
绑定了对话的打开和关闭事件this.$emit('onclose')
该组件向父级组件(页面)发送一个事件,父级组件可通过@onclose=“xxx()”
来处理这个事件this.showDialog=this.visible;
通过监控visible
的变化来改变showDialog
的值
组件的使用
html中
<audit-history :visible="showHistory" :tableName="user" @onclose="onClose()"></audit-history>
methods节点下:
//显示日志
function showLog(){
this.showHistory=true;
}
//关闭日志
function onClose(){
this.showHistory=false;
}
全局导入组件
为方便使用,可以在main.js中全局导入这个组件,这样就不用在每个页面进行导入了
main.js
import AuditHistory from './components/AuditHistory';
Vue.component('AuditHistory',AuditHistory)