element-ui之dialog组件title插槽的使用

dialog对话框组件title属性的slot使用方法

使用背景

需要单独控制title中某个数据显示及样式，footer也一样

      <el-dialog// 也可以这样写,但是没有办法单独控制name age的显示// title="name+ '' + age"title="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose">// 这里的插槽会替换title显示的内容<div slot="title" class="header-title"><span v-show="name" class="title-name">name {{ name }}</span><span class="title-age">age {{ age }}</span></div><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog>
<script>export default {data() {return {dialogVisible: false,name: 'freely',age: 20};},methods: {handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});}}};
</script>

element-ui之dialog组件title插槽的使用相关推荐

element ui 弹出组件的遮罩层在弹出层的上面的解决方法
element ui 弹出组件的遮罩层在弹出层的上面的解决方法参考文章: (1)element ui 弹出组件的遮罩层在弹出层的上面的解决方法 (2)https://www.cnblogs.com/ ...
element UI上传图片Upload组件使用图片转base64和fale文件处理 formdata数据格式的应用
element UI上传图片Upload组件使用 & 图片转base64和fale文件处理 & formdata数据格式的应用 1.element UI上传图片Upload组件使用效 ...
vue问题三：element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
Element UI（桌面组件库）之三大灵魂拷问
1. 什么是Element UI 概述 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供 ...
element ui 多个子组件_ElementUI 技术揭秘（2）组件库的整体设计
需求分析当我们去实现一个组件库的时候,并不会一上来就撸码,而是把它当做产品一样,思考一下我们的组件库的需求.那么对于 element-ui,除了基于 Vue.js 技术栈开发组件,它还有哪些方面的需 ...
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
element ui table封装组件，render 函数动态事件设置
接着上一篇讲的,封装element ui table, 支持自定义列的展示和按照指定顺序展示自定义列需要在引用页面重新写一下,这样就可以定义化了,多数用于一些转换,或者操作列场景下,自行考虑即可,我 ...
element ui里dialog关闭后清除验证条件
//vue<el-dialog title="编辑用户" :visible.sync="dialogFor ...
element ui el-dialog子组件放到表格中title一直居中
1.背景和问题背景:子组件放在表格column中,子组件有个button和el-dialog 问题:el-dialog弹窗一直居中,center样式设置为true也不行 2.解决方式原因:表格列默 ...

element-ui之dialog组件title插槽的使用

element-ui之dialog组件title插槽的使用相关推荐

最新文章

热门文章