vue篇(技术总结 持续更新)

20200320 方法中如何同时传event和参数

20200227 el-table表格出现抖动闪动情况

.el-table{
  width:99.9%;
}

20200121 vue 报错:Cannot read property '_wrapper' of undefined

通常情况下是@click的方法没有在methods中定义,一个个去排查吧

20200117 el-select设置value为对象

普通的,如果直接传对象,会显示如下效果,解决办法:el-select加value-key属性唯一标识
vue篇(技术总结 持续更新)_第1张图片

20200109 el-table勾选和取消勾选以及获取勾选的值

// 勾选和取消勾选 rows为数组 type为true或false
toggleSelection(rows,type) {
  if (rows) {
    rows.forEach(row => {
      this.$refs.multipleTable.toggleRowSelection(row,type);
    });
  } else {
    this.$refs.multipleTable.clearSelection();
  }
},
// 获取勾选的值 拿到的是数组
handleSelectionChange(val) {
  this.multipleSelection = val;
}

watch监听

watch:{
      detailDialog: {
        handler(val, oldVal) {
          if (!this.detailDialog) {
            this.getList();
          }
        },
        deep: true // 监听这个对象中的每一个属性变化
      },
    },

多个路由指向同一个组件来回切换时不刷新问题

第一种.
第二种.组件页面中加watch监听 监听变化
export default {
  watch: {
    '$route' (to, from) {
      console.log('to=' + to)
      this.reload()
    }
  }
}
第三种.使用vue2.2中引入的beforeRouteUpdate导航守卫(原理同上者,方式略不同)

export default {
  beforeRouteUpdate (to, from, next) {
    console.log('routeUpdate:to=' + to.fullPath + ';from=' + from.fullPath)
    next()
  }
}

elementUI tree树形控件选择了子节点如何同时获取父节点

this.$refs.tree.getHalfCheckedKeys().concat(this.$refs.tree.getCheckedKeys())

element-ui框架的el-dialog弹出框被遮罩层挡住了

解决办法:在el-dialog标签里添加 :modal-append-to-body='false'或append-to-body

编辑时表单中el-radio无法点击选择的情况

form对象从row拿到的值没有包含当前属性 直接赋值的话就会出现这种情况
解决办法:用$set赋值  this.$set(this.form,'isMaxNums',this.form.IssueQuantity>10000?2:3);

vue-cli项目build后 部署到服务器 css/js报404

修改config目录下index.js 里面的assetsPublicPath: '/' 为assetsPublicPath: './'

如何修改v-html内图片的或文字的样式

单独写一个style标签 加样式

vue-cli项目性能加载优化

1.vue-router路由懒加载(解决vue项目首次加载慢)
2.vue-cli代码包优化 屏蔽SourceMap(配置productionSourceMap: false)

vue页面数据更新后如何回滚到最顶部

刚开始用的scrollTo(0,0) 发现时灵时不灵 改进之后 先获取当前页面节点 再去滚动
document.getElementsByClassName('news_detail')[0].scrollTo(0,0);

elmentUI+vue实现多选框遍历数组对象

// 需要label的是整个对象 而不是具体的id或name


// 以上写法 针对对象数组 有时候也无效 可用label去控制id 默认选中的checkedCities也给id数组

  {{city.name}}

 

你可能感兴趣的:(vue篇(技术总结 持续更新))