vue2+elementUI项目坑位集锦

vue+element table中，自定义表头内容不是响应式

<template slot="header">
	{{data}}  //此时data数据变化不会使页面中内容随之变化
</template> 

// 把slot=“header”改成 #header 就可以了

vue组件通信子传父函数拼装参数

父组件中@监控方法需要同时获取父组件中参数及子组件参数时，写法如下：
@click="getParam(父组件参数，$event)"  此时$event即为子组件中方法的传参

vue+elementUI中Collapse的自定义title中按钮点击阻止冒泡事件

使用collapse折叠面板, 折叠面板的title使用的自定义内容, 里面包含一个按钮
点击按钮, 按钮事件生效, 但同时, 折叠面板的title点击事件也生效(即, 面板折叠或者展开了)，若要点击按钮时title本身的点击事件不生效，可用如下写法：

<el-collapse v-model="activeNames" @change="handleChange">
  <el-collapse-item name="1">
    <template slot="title">
      自定义title
      <div @click="stopProp">
        <el-button size="mini" type="primary">我是按钮</el-button>
      </div>
    </template>
    <div>这里是展开内容</div>
  </el-collapse-item>
  <el-collapse-item title="非自定义title" name="2">
    <div>vue+elementUI中Collapse的title自定义如何阻止冒泡事件</div>
  </el-collapse-item>
</el-collapse>
<script>
  export default {
    data() {
      return {
        activeNames: ['1']
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      //阻止冒泡事件
      stopProp(e) {
        e.stopPropagation()
      }
    }
  }
</script>

vue2模板语法中使用函数

<template>
  <div> 
  	{{这里想使用函数且携带传参}}
    {{getName(param)}}
  </div>
</template>

// 这里getName只能是计算属性，不能是方法(实测报错)，在计算属性中这么写：
 computed: {
     getName: () => {
         return (param) => {
           	// 这里写具体处理流程，最后一定要return出去要在页面上显示的值
           	const res = ................;
             return res
         };
     },
 },

element dialog设置destroy-on-close后关闭弹窗时触发了子组件的mounted

实际使用对话框组件时，设置了destroy-on-close为true的一个el-dialog，在关闭时候，触发了子组件的mounted。

原因在于：

源码中dialog组件destroy-on-close的实现原理为当dialog的visible变成false时(即关闭dialog)，destroyOnClose=true属性会使此对话框中class名为el-dialog的key值+1，而key值变化会使得此div重新渲染。
所以这个属性并不是真的关闭弹窗后销毁对话框组件中的元素，而是拿个白板盖住里面的元素，把原来的元素藏起来，生成白板的时候，会把原来的元素一起刷新一次，所以会触发原组件的mouted。

解决方法：

不使用destroy-on-close属性，而是用v-if来判断对话框内子组件

vue中v-for中数据变了，但视图没变

在v-for中列表的每个item都有个按钮，点击按钮，想把按钮的类名通过一个属性show,type为boolean来动态的选择，v-show通过每个item这个show的true还是false来显示。但是实际运行中，点击后值的确改变了，但是视图并没有重新渲染。搜索结果显示：v-for对于数组的添加删除会重新渲染，但是修改数组中某个值则不会。

原因：

vue对于data中数组的属性双向绑定仅限于声明时存在的属性，后续方法中添加的属性不会被vue监听到。

解决方法：

1、v-for使用的data中的数组在声明时把参数写进去。
2、使用vue的set方法：

import Vue from 'vue'
ssss() {
    for(var i=0;i<arr.length;i++){
      arr[i].show=false
      Vue.set(this.productDetailList,i,arr[i])
   	}
}

div设置圆角以后，当滚动条出现，圆角会失效

css overflow和border-radius一起用会出现如下情况

解决办法为外层套一个div，设置overflow: hidden和border-radius，内层的div设置overflow-y:auto;高度100%即可

element el-tree自定义节点选中高亮样式

// 给组件添加highlight-current属性，然后css中写入内容如下：

//  移入树形
.el-tree-node__content:hover {
  background: rgba(0, 229, 255, 0.3) !important;
}
// 选中当前node的样式
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background: rgba(0, 229, 255, 0.5)!important;
  color: red!important;
}

element el-tree组件手动选中节点(setCurrentKey)不会自动展开此节点

在vue2中，需要实现外部组件点击时，携带参数来跳转到含有tree组件的页面，同时需要根据携带的参数，让tree组件默认展开并选中某个节点，当使用this.$refs.xxxxx.setCurrentKey(id)来手动选中tree组件此节点时，需要在组件上搭配node-key，default-expanded-keys，highlight-current三个属性才能实现需求，setCurrentKey方法只能使节点被选中，并没有展开的逻辑，需要结合default-expanded-keys