element使用小结

码不停T2023-11-28 2:07

1、tabel表头文字自定义效果 （换行，不同颜色）

换行：

复制代码

// 方法一
<el-table-column
  prop="otherCost"
  :label="'本期累计\n(元)'"> // 通过:label添加\n
</el-table-column>

.xx .cell {
  white-space: pre-line;
}

// 方法二
通过template标签

关于换行也可以使用width设置宽度进行换行，但不好控制换行字体个数（上少下多），而且整体列的宽度效果会不好，不能做到均分。

2、v-loading

v-loading可以在div上也可以在table上，但要想实现v-loding效果，所在标签不能使用v-show，包括父标签。
3、form

加了rules校验并且触发判断是change的input框不能限制输入类型（只能输入数字这种：οninput="value=value.replace(/[^\d]/g,'')"），当用户输入不可输入的类型（比如只能输入数字你输入汉字字母）之后，rules将失效，输入提示不更新，点击submit也无法触发。