基于vue的表格自定义表头搜索功能

工作中遇到了需要点击表格头展示本列数据,数据可搜索功能,所以把代码贴上来.

这里采用的是组件的方法:

  父组件: 

// 父组件 HTML代码      
<el-table-column>
  <template slot="header" slot-scope="scope">
    <u-select table-title="表格名字" @btnTableHeader="btnTableHeader($event)"></u-select>
    </template>
</el-table-column>

<u-select-position :x="clientX" :y="clientY" :select-info="selectInfo"></u-select-position>



// js

btnTableHeader(event) {
  this.clientX = event.clientX
  this.clientY = event.clientY
}  // 展示弹窗位置

子组件

u-select组件展示自定义表头 

<template>
  <div class="u-select-wrap" @click.stop="btnTableHeader">
    <div>
      <span>{{ tableTitle }}</span>
      <slot name="title">
        <img style="width: 10px;" src="../../../../assets/u1669.png" />
      </slot>
    </div>
  </div>
</template>

export default {
  props: {
    tableTitle: {
      type: String,
      default: "",
    },
  },
  data() {
    return {}
  },
  methods: {
    btnTableHeader(e) {
      this.$emit("btnTableHeader", e)
    },
  },
}
</script>

 

 

select-position组件展示位置:

// u-select-opsition  html代码
<template>
  <div v-if="isShow" class="u-select-position" :style="style" @click.stop>
    <div class="u-select-inner">
      <el-input v-model="search" placeholder="请输入内容"></el-input>
      <div class="wrap-u-select">
        <el-checkbox-group v-model="checkedOption" @change="changeCheck">
          <el-checkbox
            v-for="item in selectList"
            :key="item.value"
            :label="item.value"
            class="checkbox-single"
          >{{ item.label }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="u-select-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button @click="save" type="primary">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "USelectPosition",
  props: {
    x: {
      type: Number,
      default: 0,
    },
    y: {
      type: Number,
      default: 0,
    },
    selectInfo: {
      type: Array,
      default: 0,
    },
  },
  data() {
    return {
      search: '',
      checkedOption: [],
      // selectList: [],
      isShow: false,
    }
  },
  computed: {
    style() {
      return `left:${this.x}px;top:${this.y + 20}px`
    },
    selectList: {
      get() {
        var item = this.selectInfo.filter(ele => {
        if (ele.label.match(this.search)) {
          return ele
          }
        })
        return item
      },
      set() {}

    }
    // selectList() {
    //   return JSON.parse(JSON.stringify(this.selectInfo))
    // }
  },
  watch: {
    x: {
      handler(newName, oldName) {
        console.log("newName", newName)
        if (newName) {
          this.isShow = true
          this.checkedOption = this.selectList
        }
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      // immediate: true
    },
  },
  mounted() {
    window.addEventListener("click", () => {
      this.isShow = false
      this.selectList = []
    })
  },
  methods: {
    changeCheck() {
      console.log(this.checkedOption)
    },
    cancel() {
      this.isShow = false
      this.selectList = []
    },
    save() {},
  },
}
</script>

组件中的值为父组件点击传入子组件后再弹窗中展示,一般有一年经验的开发都能看得懂,有不懂的欢迎留言提问