使用Element-UI的一些记录

1.如下形式使用el-table, el-table-column 内的<template></template> 一旦指定了slot-scope则if以外的场景不会自动按prop属性显示列内容，需要手动添加else场景显示内容

<el-table-column
    v-for="col in columns"
    :key="col.id"
    :prop="col.id"
    :label="col.label"
    :width="col.width"
    :formatter="col.formatter">
    <template v-if="col.id === 'storeList'" slot-scope="scope">
        <el-link type="primary" @click="showDetailDialog(scope.row)">详情</el-link>
    </template>
    <template v-else>
        <!-- something else -->
    </templete>
</el-table-column>

2.el-table表格自定义表头，slot="header"内，数据不更新的问题,

使用v-slot ="header" 或#header 替换 slot="header"，如：

<el-table-column>
    <template #header>
        <!--header-->
    </template>
</el-table-column>

参考自vue官方文档：

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header

3.vue+element 键盘回车事件导致页面刷新的问题

解决方法：

1.如果回车时有方法需要调用，在调用方法的时候加上@keyup.enter.native

<el-form-item label="参数">
   <el-input  clearable v-model="inputName" placeholder="请输入关键字"     
     @keyup.enter.native="querybtand(inputName)" />
</el-form-item>

即：@keyup.enter是vue监听键盘回车事件，如果用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native（监听根元素的原生事件，使用 .native 修饰符）

2.如果在input上加上@keyup.enter.native，第一次回车时还是会刷新界面，在el-from上加上 @submit.native.prevent

<el-form :inline="true" class="searchTerm demo-form-inline" @submit.native.prevent>
  <el-form-item label="参数" style="float: left;margin-left: 10px">
    <el-input  clearable v-model="inputName" placeholder="请输入关键字" @keyup.enter.native="querybtand(inputName)" ></el-input>
  </el-form-item>
</el-form>

即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在标签上添加 @submit.native.prevent。