vue keep-alive / vue数据层次太深的view驱动

  说明: 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。  
        keep-alive 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中
    
  说明: 当组件在 keep-alive 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行
   //  keep-alive 进入组件时   将仓库的周期设置给当前组件的period 
    activated: function () {   
      this.period = this.$store.state.sheetTableModule.periodType
  }

  // keep-alive 离开组件时
   deake ectivated: function () {
       console.log(1111)
   }
   说明: vue针对数据和对象的监控是一个避不开的问题
         特别时数据层次太深,更改数据view不发生改变的情况时常出现
         例如:
   //数据list   假设是一个computed数据
    let list = [  
       {
        setStyle:false,   //用于控制class
       value:[
        {value:10000,formatter:"int"}, 
        {value:12000,formatter:"int"},   
        ]
      },
      {
        setStyle:false,
       value:[
        {value:11000,formatter:"int"}, 
        {value:12000,formatter:"int"},   
        ]
      }
    ]
   // 如果将list遍历到table中。给tr绑定事件@click="show(item)"

   // 改变item中的setStyle来控制样式的显示
   // 此时改变list很难驱动view的变化

   /*
   * 针对这种情况 建议改变生成list的数据愿
   * 在事件触发的时候  也更改数据源
   */
   this.$set(this.origin[n],'setStyle',!this.origin[n].setStyle)   // 使用$set方法   this.origin是生成list的愿数据
Posted in: Vue



javascript数学计算插件math.js

math.js主要功能是提供更加科学的数学计算方法。
  1. 语法文档http://mathjs.org/docs/expressions/syntax.html
  2. 提供许多Math对象没有的方法 如: 对数,复数,矩阵等高等数学计算方法
  3. 将原生的^ 运算符变成求幂运算math.eval(‘2^3’) //8

eval方法将字符串解析成可运算的表达式

    /*********math.js文档提供大量运算符-请查看文档参考*********/
    math.eval('2 + 3 * 4');   // 14
    math.eval('(2 + 3) * 4'); // 20
    /*eval中可以使用比较复杂的运算方式*/
    console.log(math.eval('a=2; b=3; a*b').entries[0])
    console.log(math.eval('[1,2,3] .* [1,2,3]')._data)
    // 三元运算
    console.log(math.eval(`12>10?10:5`)) // 10
    // 范围取值
    console.log(math.eval(`1:6`)._data) //[1,2,3,4,5,6]

    // 单位换算 
    console.log(math.eval(`2 inch to cm`).value)// 0.0508m
     // 逻辑运算及布尔运算等
  

(更多…)


elementUI table的筛选

   参考element文档事例
   目的: 简单的筛选无需这种方式。主要为了做分页筛选。
       1. @filter-change="changeType" 事件添加给table --避免添加给column 

2. 设置添加筛选的列

     /*
   <el-table-column
       prop="transactionTypeId"
       :filters="selectObj"
       filter-placement="bottom-end"
       :filter-method="selectType"
       :column-key="'a'"
       :label='$t("transactionTypeId")'
      >
        <template slot-scope='scope'>
           {{$i18n._root.t(scope.row.transactionTypeId) }}
        </template>
   </el-table-column>
    */
 

(更多…)

Posted in: Vue

设置baseUrl

设置baseUrl


   /*axios.js*/ 
   import Axios from 'axios'

   export const baseUrl = process.env.NODE_ENV === 'development' ? 'http://192.168.0.101:3000/' : 'http://192.168.2.128:3000/'

   const axios = Axios.create({
     baseURL: baseUrl,
   })
   export default axios
   
  /*api请求*/ 
  import axios from '../axios'
  import {baseUrl} from "../axios"; (更多…)
Posted in: Vue

ˆ Back To Top