el-table表头搜索--写在表格里的单独的某一列进行搜索1（后面一篇文章写表格里进行子组件调用的表头搜索）

点击查看 → vue el-table 表头搜索（筛选）功能 实现分析（零）

因为这个不能直接调用表头搜索子组件的方法，只能直接写了：
如果直接全写成edc-search，而表格的内容结构与edc-search的表格内容结构不符，不可直接全部使用edc-search，而又由于单独只写连个搜索的edc-search的话，由于页面动态渲染的时间，导致搜索的两个字段均展示在表格末尾列，导致表格字段展示顺序不正确，故需要直接在表格对应的表头搜索字段处进行搜索配置，并进行后续的模糊查询

单独一列的搜索
部分代码

<el-table ref="tableData" :data="tableData" :height="tableheight" default-expand-all row-key="sysResourcesId" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width:100%;margin:0 auto 5px;font-size:0.8rem" v-loading="loading" highlight-current-row>
            <el-table-column show-overflow-tooltip min-width="100" prop="sortNum" label="排序号" align="left"></el-table-column>
            <el-table-column show-overflow-tooltip prop="resourcesCode" label="编码" align="left" min-width="100">
              <!--  -->
              <template #header v-if="headerItem.seach">
                <el-popover v-if="headerItem.seachSetting.type==='Input'" placement="bottom" trigger="click" width="200" v-model="headerItem.visible">
                  <el-input autofocus clearable @clear="clearSearch(headerItem)" style="width: 200px" size="small" v-model="headerItem.seachSetting.value" :placeholder="'请输入'+headerItem.label" @keyup.enter.native="todoSearchItself(headerItem)" />
                  <el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearchItself(headerItem)">重 置</el-button>
                  <el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearchItself(headerItem)">搜 索</el-button>
                  <div style="display: flex;align-items: center" slot="reference">
                    <span class="search-title">{{ headerItem.label }}</span>
                    <img style="width: 13px;margin-left: 10px;cursor: pointer" :src="headerItem.seachSetting.value&&headerItem.seachSetting.value!==''?img2:img1" />
                  </div>
                </el-popover>
              </template>
              <!--  -->
              <template slot-scope="scope">
                <span>{{scope.row.resourcesCode}}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column show-overflow-tooltip prop="resourcesCode" label="编码" align="left" min-width="100">
              <template slot-scope="scope">
                <span>{{scope.row.resourcesCode}}</span>
              </template>
            </el-table-column> -->
            <el-table-column show-overflow-tooltip prop="icon" min-width="100" label="图标" align="left">
              <template slot-scope="scope">
                <el-tooltip :content="scope.row.icon" placement="top">
                  <i class="textItem iconfont">{{ scope.row.icon }}</i>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="resourcesName" label="菜单名称" align="left" min-width="150">
              <!--  -->
              <template #header v-if="headerItem2.seach">
                <el-popover v-if="headerItem2.seachSetting.type==='Input'" placement="bottom" trigger="click" width="200" v-model="headerItem2.visible">
                  <el-input autofocus clearable @clear="clearSearch(headerItem2)" style="width: 200px" size="small" v-model="headerItem2.seachSetting.value" :placeholder="'请输入'+headerItem2.label" @keyup.enter.native="todoSearchItself(headerItem2)" />
                  <el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearchItself(headerItem2)">重 置</el-button>
                  <el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearchItself(headerItem2)">搜 索</el-button>
                  <div style="display: flex;align-items: center" slot="reference">
                    <span class="search-title">{{ headerItem2.label }}</span>
                    <img style="width: 13px;margin-left: 10px;cursor: pointer" :src="headerItem2.seachSetting.value&&headerItem2.seachSetting.value!==''?img2:img1" />
                  </div>
                </el-popover>
              </template>
              <!--  -->
              <template slot-scope="scope">
                <el-tooltip :content="scope.row.resourcesName" placement="top">
                  <span class="textItem">{{ scope.row.resourcesName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <!-- <el-table-column show-overflow-tooltip prop="resourcesName" label="菜单名称" align="left" min-width="150">
              <template slot-scope="scope">
                <el-tooltip :content="scope.row.resourcesName" placement="top">
                  <span class="textItem">{{ scope.row.resourcesName }}</span>
                </el-tooltip>
              </template>
            </el-table-column> -->

<el-table-column show-overflow-tooltip prop="resourcesName" label="菜单名称" align="left" min-width="150">
              <!--  -->
              <template #header v-if="headerItem2.seach">
                <el-popover v-if="headerItem2.seachSetting.type==='Input'" placement="bottom" trigger="click" width="200" v-model="headerItem2.visible">
                  <el-input autofocus clearable @clear="clearSearch(headerItem2)" style="width: 200px" size="small" v-model="headerItem2.seachSetting.value" :placeholder="'请输入'+headerItem2.label" @keyup.enter.native="todoSearchItself(headerItem2)" />
                  <el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearchItself(headerItem2)">重 置</el-button>
                  <el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearchItself(headerItem2)">搜 索</el-button>
                  <div style="display: flex;align-items: center" slot="reference">
                    <span class="search-title">{{ headerItem2.label }}</span>
                    <img style="width: 13px;margin-left: 10px;cursor: pointer" :src="headerItem2.seachSetting.value&&headerItem2.seachSetting.value!==''?img2:img1" />
                  </div>
                </el-popover>
              </template>
              <!--  -->
              <template slot-scope="scope">
                <el-tooltip :content="scope.row.resourcesName" placement="top">
                  <span class="textItem">{{ scope.row.resourcesName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>

<script>
export default {
  data () {
	seachForm: {},
    headerItem: {   // 这个格式写法 的原有，可看下一篇文章
      label: '编码',
      prop: 'resourcesCode',
      width: '140',
      seach: true,
      seachSetting: {
        type: 'Input',
        value: ''
      }
    },
    headerItem2: {
        label: '菜单名称',
        prop: 'resourcesName',
        width: '140',
        seach: true,
        seachSetting: {
          type: 'Input',
          value: ''
        }
     },
    seachFormItself: {}
  },
  methods:{
  // 自身的按钮搜索点击、重置清除操作
    todoSearchItself (headerItem) {
      headerItem.visible = false
      if (headerItem.seachSetting.type === 'Input') {
        this.seachFormItself[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = headerItem.seachSetting.value
      }
      this.todoSearch(this.seachFormItself)
    },
    clearSearchItself (headerItem) {
      if (headerItem.seachSetting && headerItem.seachSetting.type) {
        headerItem.visible = false
        if (headerItem.seachSetting.type === 'Input') {
          headerItem.seachSetting.value = ''
          this.seachFormItself[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = ''
        }
        this.clearSearch(this.seachFormItself)
      }
    },
    // 触发的方法-操作
    clearSearch (val) {
      console.log('清空--clearSearch', val)
      this.pageNum = 1
      this.pageSize = 10
      this.seachForm = val
      this.computedTableData()
    },
    todoSearch (val) {
      console.log('val---todoSearch', val)
      this.pageNum = 1
      this.pageSize = 10
      this.seachForm = val
      this.computedTableData()
    },}
}