跳至主要內容

element-ui踩坑备忘

zfh原创小于 1 分钟约 267 字

提示

关于 elementUI 的开发问题,字数达不到一篇文章的在此处记录 📝

el-table

  1. 表格列宽度使用min-width而不是width防止用户屏幕宽度过大,出现空白区域
  2. 表格应设置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>
上次编辑于:
本站勉强运行 小时