Element常用备忘

0. el-popover，边界计算参数，boundariesElement: 'viewport'，默认是body

<el-popover
                    placement="bottom"
                    width="370"
                    height="460"
                    trigger="click"
                    v-model="item.popoverOrgViaible"
                    :popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
                  >

1.表头居中

:header-cell-style="{'text-align':'center'}"

<el-table :data="tableData" border style="width: 100%" v-loading="loading" :header-cell-style="{'text-align':'center'}" >

2，vue或者js判断空，空格也算

row.tmtargetleft.trim()==""

3，table序号 <el-table-column type="index" label="序号" width="80px"> </el-table-column>

4，监听路由 监听参数

 $route(to,from){ 
     if(to.query==1){     
     }     
  }

列表查询，当其中一个查询条件变化时，pageindex重置为1：

 computed: {
    queryParam(){
      const{bzlx,city,depnew,gwbz,job,ldsx,name,operatedate,operater,orderitem,ordertype,sfzh,status} = this.form
      return{bzlx,city,depnew,gwbz,job,ldsx,name,operatedate,operater,orderitem,ordertype,sfzh,status}
    }
  },
  watch: {
    queryParam : {
      deep: true,
      handler(n, o) {
        this.form.pageindex = 1
      },
    },
  },

5,因为在vue中，某个组件内 使用scrollTop赋值 滚动条没有变化

使用scrollTo 也不行(window.scorllTo 或者dom.scrollTo) 可以考虑使用投机取巧的办法:

利用在指定位置添加一个div 然后通过div.scrollIntoView() 滚动到这个div document.getElementsByClassName('position-box')[0].scrollIntoView()

6，获取今天的日期

dateFormat(fmt, date) {
      let ret;
      const opt = {
          "Y+": date.getFullYear().toString(),        // 年
          "m+": (date.getMonth() + 1).toString(),     // 月
          "d+": date.getDate().toString(),            // 日
          "H+": date.getHours().toString(),           // 时
          "M+": date.getMinutes().toString(),         // 分
          "S+": date.getSeconds().toString()          // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
          ret = new RegExp("(" + k + ")").exec(fmt);
          if (ret) {
              fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
          };
      };
      return fmt;
    }
  },

使用：

 currentMonth(){     
      let date = new Date()
      return this.dateFormat("YYYY-mm", date)
    },

7， 8,深度监听及第一次初始化时也监听

watch:{    
    selectNodeIdsProp:{
      handler(val){
        this.selectIds = val
      },
      immediate: true,
      deep:true,     
    },
  },

9,切换tab签的时候才执行本tab的接口调用

<el-tabs  v-model="activeName">
    <el-tab-pane label="日程管理" name="third">
      <calendar v-if='activeName=="third"'></calendar>
    </el-tab-pane>
    <el-tab-pane label="日程明细" name="first">
      <detail v-if='activeName=="first"'></detail>
    </el-tab-pane>
    <el-tab-pane label="日程管理运营统计" name="second">
      <statistic v-if='activeName=="second"'></statistic>
    </el-tab-pane>
  </el-tabs>

10，懒加载的树，关键字查询后重新加载树，:key="treeFresh"来刷新树，实现自动加载：

     <el-input
        :placeholder="placeholder || '分部或者部门名称'"
        prefix-icon="el-icon-search"
        v-model="filterText"
        size="small"
         @change="searchTree"
         clearable>
    </el-input>
    
     <el-tree :key="treeFresh"
        ref="orgTree"
        :data="treeData"
        node-key="id"
        lazy
        :load="loadNode"
        :default-expand-all="expandAll"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
        :filter-node-method="filterNode"
        :highlight-current="true"
        :auto-expand-parent="true"
        :default-expanded-keys="defaultList"
    >
        <span class="custom-tree-node" slot-scope="{ node, data }"> 
            <span class="img_tree"></span>
            <span class="treename">{{ data.departmentname }}</span>
        </span>
    </el-tree>
    methods: {
     searchTree(){
        this.expandAll = false
        this.treeFresh = this.treeFresh + 1
        if(this.filterText.length>0){
          //this.expandAll = true
        }
      },
   }