element-ui踩坑备忘
原创小于 1 分钟约 267 字...
提示
关于 elementUI 的开发问题,字数达不到一篇文章的在此处记录 📝
el-table
- 表格列宽度使用
min-width
而不是width
防止用户屏幕宽度过大,出现空白区域 - 表格应设置
max-height
,通过设置max-height
属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度,则会显示一个滚动条
el-dialog
封装包含dialog
的组件时,注意不要直接给el-dialog
绑定传入的控制dialog
显示隐藏的布尔值(这样会导致直接修改了 props),可以使用计算属性完成 eg:
<template>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
<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>
</template>
<script>
export default {
name: 'TestDialog',
props: {
visible: {
type: Boolean,
default: false,
},
},
computed: {
dialogVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
},
},
},
}
</script>