2021年5-8月问题

Aditya2021-09-03开发问题

2021年5-8月问题

echarts自适应屏幕
element-ui中el-table根据浏览器的缩放自适应宽度
Typescript 报错
Element.scrollTo is not function
el-select 下拉框不跟着滚动问题
表达式运算法

1. echarts自适应屏幕

setTimeout(function (){
  window.onresize = function () {
    instance.resize();
  }
},200)

之前一直是用instance.setOption(option), 但重新渲染的效果不被采纳，所以使用了resize方法

2. element-ui中el-table根据浏览器的缩放自适应宽度

通过科学上网找到了几种方式

包裹一层父元素并添加position:relative,子元素添加position:absolute;width:100%

这种方式确实可以解决问题

还有中就是直接改el-table的样式

/deep/ .el-table{
  width: 100%;
  border-radius: 4px;
  .el-table__header-wrapper table, .el-table__empty-block, .el-table__body-wrapper table{
    width: 100% !important;
  }
  .el-table__body, .el-table__footer, .el-table__header{
    table-layout: auto;
  }
}

3. Typescript 报错

Property ‘validate’ does not exist on type ‘Vue | Element | Vue[] | Element[]’

validate找不到类型，此时可以使用类型断言，将 validate 断言成： HTMLFormElement

const ref:any = refs[formName] as HTMLFormElement
ref.validate(async (valid: boolean) => {
  //
}

4. Element.scrollTo is not function

最近有遇到这个问题，具体是出现在套壳chrome中报这个问题，window.scrollTo有这个方法，Element.scrollTo却是个undefined，顺手查了下壳的chrome内核版本以及这俩API的兼容性

Window.scrollTo 45
element.scrollTo 61
Chrome version 47

简单解决方案是搬过来IE的polyfill

if (!window.scrollTo) {
    window.scrollTo = function (x, y) {
        window.pageXOffset = x;
        window.pageYOffset = y;
    };
}
if (!window.scrollBy) {
    window.scrollBy = function (x, y) {
        window.pageXOffset += x;
        window.pageYOffset += y;
    };
}
if (!document.body.scrollTo) {
    Element.prototype.scrollTo = function (x, y) {
        this.scrollLeft = x;
        this.scrollTop = y;
    };
}
if (!document.body.scrollBy) {
    Element.prototype.scrollBy = function (x, y) {
        this.scrollLeft += x;
        this.scrollTop += y;
    };
}

5. el-select 下拉框不跟着滚动问题

popper-append-to-body：是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false

产生这个问题的情况是出现在table表格里使用了el-select，并且table有滚动条，它的滚动监听的是table的滚动条，如果滚动外层并不会触发下拉框的scroll方法，导致el-select 姜住了（头大）

某些情况下可以改动popper-append-to-body：false来解决这个问题，但是在table里有overflow：hidden会隐藏掉部分下拉框，通过固定table高度倒是可以解决，但是这样会产生另外问题，有些table本身没数据的。

6. 表达式运算法

6.1 空值合并运算符

空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 nullopen in new window 或者 undefinedopen in new window 时，返回其右侧操作数，否则返回左侧操作数。

与逻辑或操作符（||）open in new window不同，逻辑或操作符会在左侧操作数为假值open in new window时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，'' 或 0）时。见下面的例子。

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullishopen in new window ) (nullopen in new window 或者 undefinedopen in new window) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

2021年5-8月问题