element使用小结

1、tabel

表头文字自定义换行

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

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

// 方法二
通过template标签

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

可编辑input focus

this.$refs.edit.focus(); // 正常我们用$refs,但在table里不支持，会报undefined
document.getElementById(”edit“).focus(); // 需要使用id来获取

row-click、cell-click问题
table的行点击事件和单元格点击事件，column参数返回的property代表字段名，它和el-table-column的prop是一样的，我实现的场景是有一列有有多标题，有一列是单标题头，这两列我设置了相同的class，问题就在相同的class上，不管我点击多标题头还是单标题头都会返回单标题头的property，可能是单标题头在后面，拿的是最后面的。找到问题了就好解决了，我设置不同的class返回就对了，至于样式嘛，两个class公用设置一样的就好了。

版本样式兼容性
package.json使用的element-ui版本不固定（使用^），不同的开发者（发布后）可能安装下来的不是同一个版本，就会造成table生成的元素不一样，导致样式问题

解决方法：
1、package.json使用的element-ui版本固定，去掉前面的^；
2、不同element版本生成元素的table元素不同点在el-table__cell这个class上，有的th、td有这个class，有的没有，在改样式的时候如果不加el-table__cell，在生成的有el-table__cell标签的版本上将会层级不够，修改样式失败，如果加el-table__cell，在没有el-table__cell标签的版本上也将修改失败。兼容性方案：a、不加el-table__cell在样式上加 !important;b、加el-table__cell和不加el-table__cell两种都写（推荐）

没有值显示"–" 方法一：通过template标签（略）； 方法二：formatter

<el-table-column :formatter="formatter" prop="prop1" label="值" />
formatter(row, column, cellValue) {
    return cellValue ? cellValue : "--"; // 这个代码不严谨，注意0、单位这些
}

// 方法三：css
vue3写法

2、v-loading

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

3、form

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

4、select

下拉展示（本该消失）
点击select，展示下拉项，选择后点击下拉项收起，但是我这里选择后多了一步，弹窗确定，操作完后再执行其他流程，这里就会遇到选择下拉项后，弹窗出来，下拉项收起，点击弹窗”取消“或”确定“按钮后，弹窗消失下拉项又显示出来了。
通过排查我发现鼠标还定位在select框上，即select框此时还在focus状态下，找到问题就容易解决了，让select失去焦点即blur。
之前也偶现过什么操作都没做首次进页面下拉在展示的，应该是一样的。

this.$refs.select.blur();

5、日期选择器

问题：选择弹窗样式错乱。
问题背景：dialog上日月年切换（日期类型肯定也得切换），鼠标放日期input框上后日期选择弹窗标签生成位置不对（应该在根目录下，有时候会生成在日期input框下面），导致样式错乱。
解决方法：强制给生成在日期input框下面的日期弹窗设置fixed（如果正常生成在根目录下面这个样式也不会起作用，只针对特殊情况）。

6、Pagination 分页

一般配合table使用
遇到的问题
1：点击页码有一个弹窗，确定后再选中该页码，但是无法控制不选中，后面我就放弃了，不管取消还是确定最总反正要去下一页的（因为是个需要修改、保存的table，确定就保存，取消就不保存数据，最终都让他跳下一页）
2：但是它又出现了新的问题（看来还是得解决啊），当我切换到最后一页，再改变每页显示条数，分页正常是要重新定位到第一页的，但是赋值失败，它停留在了该条件的最后一页上，两个条件的最后一页还不一样（当时应该是这样的，不管具体啥问题，反正解决方法都一样，嘻嘻）
解决方法：
1、pagination组件加上key，每次@size-change都重新渲染（即每触发一次就先key++，推荐）
2、pagination组件上设置v-if，设置页码后控制v-if重新渲染（要使用nextTick）
还有一种情况current-page无法赋值成功（总是在第一页，无法切换其他页），原因是请求接口前想着把total（总条数）先重置一下（先赋值0），接口请求成功后再使用接口返回的值（即total再重新赋值为接口返回的对应值），这样是不行的。