element 页面显示效果及需要注意的点

1.table表头和特定列颜色配置

效果图：

 代码：

//表头颜色
:header-cell-style="{ background: '#f7f8fa', color: '#444' }"
//特殊列颜色
cellStyle(row, column) {
      if (row.column.label === "提示信息") {
        return "color:red";
      }
    },

代码位置：

2.内容超出隐藏，悬浮显示

  2.1 显示全部的内容

  2.2 显示提示文字

    上左

 3.table 行中循环遍历数组

4.form表单验证

form表单验证经常用到，但有时候敲了半天发现就是达不到效果。这时候需要检查一下你的代码

 根据图片和提示进行比较，总能发现你存在的问题。

5.时间选择器

众所周知，element的时间选择器非常好用。但是使用时间范围选择时，会遇到意想不到的坑

 当使用时间范围选择时，关联的数据是数组，数组中的两个值分别为开始日期和结束日期。我们使用前需要判断数组是否存在，若数组存在再去拿取相应的值，否则设置默认值。

写法如图：

 6.常用的事件修饰符

stop 阻止单击事件继续传播。与阻止事件冒泡相同

prevent 阻止默认事件。例如a链接的页面跳转

once 点击事件只会触发一次