说明:
上面是我对element ui中的dialog组件进行的美化,主要是对style的修饰,啥也不说了,直接上代码。
代码:
<template>
<!--查询医院子组件(我是小木鱼)-->
<div>
<el-dialog width="760px" :visible.sync="dialogVisible" title="定点机构查询" :close-on-click-modal="false" class="class_dialog_hospital">
......略
</el-dialog>
<div>
</template>
<script>
export default {
name: 'query_hospital',
data () {
return {
dialogVisible: false, // 默认不显示
qryHisCodeName: '', // 查询码或名
tableData: [], // 表数据
page_size: 8, // 每页显示条目个数
page_sizes: [8, 20, 30, 40, 50, 100], // 每页显示个数选择器的选项设置
current_page: 1, // 当前页
total: 0, // 总记录数
curRow: null
}
},
methods: {
// 显示本窗口
show () {
// 判读是否查询过数据
if (this.total > 0) {
this.dialogVisible = true
} else {
this.queryInit()
}
}
...略
</script>
<style>
/*标题样式*/
.class_dialog_hospital .el-dialog__title{
font-size: 14px;
}
/*头区样式*/
.class_dialog_hospital .el-dialog__header{
height: 26px;
background: #e6e6e6;
padding: 4px 0 4px 10px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
/*头区退出按钮样式*/
.class_dialog_hospital .el-dialog__headerbtn{
top: 10px ;
right: 10px;
font-size: 16px;
}
/*对话框区*/
.class_dialog_hospital .el-dialog{
border: 1px solid #DCDFE6;
box-shadow: 0 0 4px #e6e6e6;
border-radius: 9px;
padding: 0;
}
/*内容区*/
.class_dialog_hospital .el-dialog__body {
padding: 0;
}
/*脚区*/
.class_dialog_hospital .el-dialog__footer {
border-top: 2px solid #e8eaec;
height: 54px;
font-weight: bolder;
}
</style>
注意:
.class_dialog_hospital 是本对话框组件的class名字。
要想样式起作用必须<sytle>,把原来默认自带的scoped去掉。