element-ui踩坑备忘

提示

关于 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>