工作中-element-ui 的使用记录（二）dialog内容滚动，el-table纵向滚动,input各个事件等等

1. 设置el-dialog里面的内容滚动

el-dialog默认高度是自由拉伸的，当内容超过屏幕时会出现滚动条，按钮和标题都会随着滚动，用户体验不好。

.container-box{
    //弹出层的高度
    ::v-deep .el-dialog.import-dialog{
      height: auto;
      max-height: 80vh;
      overflow-y: auto;
    }
    //弹出层里内容的高度
    ::v-deep .el-dialog__body{
      max-height: 70vh!important;
    }
  }

2. el-table设置纵向滚动

效果如下：

添加如下代码：

::v-deep .el-table__body-wrapper {
  height: 175px;//这里设置table里面滚动的高度
  overflow-y: scroll;
  position: relative;
}

::v-deep .el-table {
  flex: none;
}

3. 如何监听当前行的数据有变化时，才提交修改

先上效果图

首先弄清楚当前行的控制状态，字段为true时，才允许修改，还是字段为false才允许修改。
总体思路

3. 最终实现代码(部分)

  //监听表当前行
        currChange(curr) {
            console.log(curr);
            this.planTable.forEach((d) => {
                if (d.Iseditor === false && d.PlanWorkId != curr.PlanWorkId) {
                    d.Iseditor = true
                }
            })
        },
        // 为true时全部关闭
        handleEdit(row) {
            if (row.Iseditor) {
                this.$set(row, 'Iseditor', false)
                this.oldRow = JSON.stringify(row)
            } else {
                this.$set(row, 'Iseditor', true)
            }
            this.isActive = false;
        },
        confirmSelect(row) {
            console.log(JSON.stringify(row) == this.oldRow);
            if (JSON.stringify(row) == this.oldRow) {
                row.Iseditor = true
                return
            } else {
                modifyPlanWorkApi({
                    "PlanWorkId": row.PlanWorkId, //计划工作ID（主键）
                    "CycleConfigIdTag": row.CycleConfigIdTag, //周期配置ID
                    "PlanWorkContent": row.PlanWorkContent //计划工作内容
                }).then(res => {
                    if (res) {
                        this.$layer.msgSuccess(res);
                        row.Iseditor = true
                    }
                })
            }

        },

4. input 各个事件

@input（或者是v-on:input）每输入一个字符都会触发该事件，用于实时查询。

<input type="text" placeholder="通过乘车人/订单号查询"  v-model="inputVal"  @input="search" value="" />

@keyup.enter 该事件与v-on:input事件的区别在于：input事件是实时监控的，每次输入都会调用， @keyup.enter事件则是在pc上需要点击回车键触发，而在手机上则是需要点击输入键盘上的确定键才可触发。

<input type="text" placeholder="通过乘车人/订单号查询" v-model="inputVal"  @keyup.enter="search" value="" />

若是element组件封装的，加.native 因为：vue封装@click这些方法时阻止了原生的DOM事件，而native就是释放DOM原生事件

<el-input  v-model="filterText"  placeholder="输入关键字进行过滤" @keyup.enter.native="search"/>

@change 该事件和enter事件相似，在手机上都是要经过触发虚拟键盘的搜索键才会触发事件。使用方式同input事件。

注：在ios手机上会出现问题: 如果要的效果是输入值不用虚拟键盘触发方法就调查询接口进行查询，这时在安卓手机上没有问题，但是在ios手机上会出现多次触发的情况。
简单的解决办法：对input的值进行监听（watch），把原本需要绑在input框的事件在监听变化时调用

@blur（元素失去焦点时所触发的事件）要满足输入框在输入完成、移到其他地方时进行验证时，需要用到该事件，用此事件进行绑定验证方法即可。注：如果使用mintui中的mt-field标签时，对应的blur（失焦）事件要执行时，要用@blur.native.capture=""来代替@blur。

<mt-field label="用户名" placeholder="请输入用户名" type="text" v-model="username" @blur.native.capture="testUser"></mt-field>

5. @focus（元素获取焦点时所触发的事件） input框获取焦点时所触发的事件，初始状态

5. 数组的map方法

map() 方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。值得注意的是：

map()函数不会对空数组进行检测；
map()函数不会改变原始数组，它形成的是一个新的数组

相关语法

array.map(function(currentValue, index, arr), thisIndex)

参数说明：

function(currentValue, index, arr)：必须。为一个函数，数组中的每个元素都会执行这个函数。其中函数参数：

currentValue：必须。表述当前元素的的值(item)
index：可选。当前元素的索引也就是第几个数组元素。
arr：可选。当前元素属于的数组对象
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值

6. 页面切换时window.scrollTop(0,0)为啥不生效

有时，我们切换页面时候想让滚动条滚到顶部，然后在生命周期函数中使用了这个方法，但是发现滚动条并没有滚动上去。

原因分析：

只有一个原因，说明不是最外层的元素产生的滚动条。
查找一下产生滚动条的元素：

 const container = document.querySelector(".类名");
        if (container) {
          container.scrollTo(0, 0);
        }

文章参考---->

7. computed 传参

使用computed 返回一个匿名函数

8. el-table修改表头和表格的背景颜色

 <el-table :data="tableData" style="width: 100%" :cell-style="setCellColor" :header-cell-style="setTitleColor">
       <el-table-column prop=" date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.name}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
          </el-table>
          
          
   methods: {
     //修改table的背景颜色
    setCellColor({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1 || columnIndex === 3 || columnIndex === 4) {
        return 'background-color:#def4f7;height:40px;'
      }
    },
    //修改表头的背景颜色
    setTitleColor({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1 || columnIndex === 3 || columnIndex === 4) {
        return 'background-color:#def4f7;'
      }
    },
  },

效果：