vue element里的一些小功能

Dialog 对话框

红色标记的x 如果项目中不想展示的话

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
   :show-close='false'
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
 :show-close='false'  设置这个，就可以去掉上面的x了

如果想要双击事件，编辑的话

 <el-table
      :data="tableData"
       @cell-dblclick="dblhandleCurrentChange"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

在methods 里调用这个函数dblhandleCurrentChange

 /**表格双击事件*/
    dblhandleCurrentChange(value){
        console.log(value); //这个就是双击表格是拿到了双击那行的数据
      },

当出现dialog时候，如果点击阴影部位时，不想直接把dialog消失掉，我们只要 加上**:close-on-click-modal=‘false’** 这一行代码就够了
代码如下：

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :close-on-click-modal='false'
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

表格里宽度不够显示不全，隐藏显示，鼠标放上去展示全部

//只需要设置  :show-overflow-tooltip="true" 这个就好了
<el-table-column :show-overflow-tooltip="true">
</el-table-column>

下面这种如果想清除的话，只要加上下面的这个函数就行（multipleTable 是表格ref）

 this.$nextTick(() => ｛
            this.$refs.multipleTable.clearSelection();//清除选中的选项 
        })

实现刷新 导航菜单项激活状态保持
只需要加上 :default-active=“this.$route.path” 这一句就好了

 <el-menu
              :default-active="this.$route.path"
              class="el-menu-vertical-demo"
              router
              background-color="#fff"
              active-text-color="#409EFF">

InputNumber 计数器不允许输入，只允许做加减

  //    @keydown.native="channelInputLimit"  此方法禁止输入
 <el-form-item label="入住天数：" prop="days">
              <el-input-number
                v-if="!bookingToCheckin"
                v-model="formInline.days"
                :min="1"
                @input="1"
                @change="reduceTime"
                @keydown.native="channelInputLimit"
              />
              <span v-else>
                {{ formInline.days }}
              </span>
            </el-form-item>

 channelInputLimit(e) {
      e.returnValue = ''
    },

elementui中，有一个tooltip组件，他有一个叫做content的参数，指的是显示的内容，可以通过 slot#content 传入 DOM。可以自定义显示的内容

<template>
  <div>
    <el-tooltip content="提示内容">
      <span>鼠标悬浮时显示提示</span>
      <template slot="content">
        <div class="tooltip-content">
            <p>这是提示内容1</p>
            <p>这是提示内容2</p>
        </div>
      </template>
    </el-tooltip>
  </div>
</template>