探索el-table与el-popover的巧妙组合：表头搜索功能大揭秘

2023-10-06 03:31:12

el-table与el-popover简介
el-table和el-popover都是Element UI组件库中的重要组件。el-table是一个功能强大的表格组件，可以轻松创建和管理表格数据。el-popover是一个弹出式组件，可以显示额外的信息或控件。

实现表头搜索功能

要实现表头搜索功能，我们可以将el-popover组件与表格头部单元格关联。当用户在表头单元格中点击时，el-popover组件就会弹出，并显示一个搜索框。用户可以在搜索框中输入搜索条件，然后点击搜索按钮进行搜索。搜索结果将根据搜索条件过滤表格数据。

代码示例

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名">
      <template slot-scope="scope">
        <el-popover
          placement="bottom"
          width="200"
          trigger="click"
          content="搜索姓名">
          <el-input v-model="searchName" placeholder="请输入姓名" @keyup.enter="handleSearchName"></el-input>
        </el-popover>
        {{ scope.row.name }}
      </template>
    </el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 30 },
        { name: '王五', age: 40 }
      ],
      searchName: ''
    }
  },
  methods: {
    handleSearchName() {
      // 根据搜索条件过滤表格数据
      this.tableData = this.tableData.filter(row => row.name.includes(this.searchName))
    }
  }
}
</script>