vue+elementUI组价学习

1、事件没有实现

首先想到的是要在所在方法内进行debugger，看看有没有走进去这个方法

2、vue中的ref作用：本页面获取dom元素

<template>
  <div id="app">
    <div ref="divDom">2222</div>
    <button @click="getDiv">获取div节点</button>
  </div>
</template>

<script>
export default {
  methods: {
    getDiv() {
      console.log(this.$refs.divDom)
    }
  }
};
</script>

打印结果：

3、为何在vue项目中data需要使用return返回数据呢？

• 不使用return包裹的数据会在项目的全局可见，会造成变量污染
• 使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

注意：vue中data是一个函数

data:function(){
    return{
        
    }
}

4、v-for在标签中的位置

v-for在标签中的位置主要取决于要在哪里展示，如下代码：

 	<el-dropdown size="mini" split-button type="primary">
        超小尺寸
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item,index) in array">{{item}}</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>

5、table组件

注意：stripe属性不能与row-class-name同时用，row-class-name属性与stripe = true互斥

单选功能

Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号。