Vue2 el-table组件自定义表头搜索

最新推荐文章于 2024-09-05 18:24:29 发布

原创

最新推荐文章于 2024-09-05 18:24:29 发布 · 2.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

Vue2 el-table组件自定义表头搜索

Vue2 el-table组件自定义表头搜索

Vue2 el-table组件自定义表头搜索

在很多管理系统中存在列表搜索功能，部分客户要求在表头添加搜索框实现搜索功能如下图效果，这里记录实现过程！
在这里插入图片描述

1、自定义搜索表头组件

首先创建一个组件ColumnHeader.vue内容如下：

<template>
  <!-- 输入框类型 -->
  <div v-if="type === 'input'" class="cell-content">
    <span v-if="isShowTitle" class="title-click" @click="isShowTitle = false;">
      {
  
  { title }} <i class="el-icon-zoom-in"></i>
    </span>
    <el-input v-else clearable size="mini" :placeholder="`${title}`" v-model="changeValue"
              @keyup.enter.native="toSubmit"
              @clear="toSubmit"
              @input="toInput"
    >
      <!-- <i class="el-icon-search el-input__icon" slot="suffix" @click="toSubmit"></i> -->
    </el-input>
    <i v-if="!isShowTitle" class="el-