当前位置：首页 > VUE

vue中实现combogrid

2026-02-19 02:06:00VUE

Vue 中实现 ComboGrid 的方法

ComboGrid 是一种结合了输入框和表格的下拉选择组件，常用于需要搜索和选择多行数据的场景。以下是几种实现方式：

使用 Element UI 的 Autocomplete 与 Table 结合

安装 Element UI 后，可以通过组合 el-autocomplete 和 el-table 实现类似功能。

<template>
  <div>
    <el-autocomplete
      v-model="searchText"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>
    <el-table
      v-if="showTable"
      :data="filteredData"
      @row-click="handleRowClick"
    >
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      showTable: false,
      allData: [
        { name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { name: '李小狼', address: '上海市普陀区金沙江路 1517 弄' }
      ],
      filteredData: []
    }
  },
  methods: {
    querySearch(queryString, cb) {
      this.showTable = true
      this.filteredData = queryString
        ? this.allData.filter(item => 
            item.name.toLowerCase().includes(queryString.toLowerCase()) ||
            item.address.toLowerCase().includes(queryString.toLowerCase())
          )
        : this.allData
      cb(this.filteredData)
    },
    handleSelect(item) {
      console.log(item)
    },
    handleRowClick(row) {
      this.searchText = row.name
      this.showTable = false
    }
  }
}
</script>

使用第三方组件库

一些第三方库如 vue-combo-grid 专门提供了这种功能：

安装组件库：
```
npm install vue-combo-grid
```

在项目中使用：


<template>
<vue-combo-grid
 v-model="selectedValue"
 :data="gridData"
 :columns="columns"
 placeholder="请选择"
/>
</template>

import VueComboGrid from 'vue-combo-grid'

export default { components: { VueComboGrid }, data() { return { selectedValue: null, gridData: [ { id: 1, name: '选项1', desc: '描述1' }, { id: 2, name: '选项2', desc: '描述2' } ], columns: [ { field: 'name', title: '名称' }, { field: 'desc', title: '描述' } ] } } }

```

自定义实现 ComboGrid

对于更复杂的需求，可以完全自定义实现：

<template>
  <div class="combo-grid-container">
    <input
      v-model="searchQuery"
      @focus="showGrid = true"
      @blur="handleInputBlur"
      placeholder="搜索并选择..."
    />
    <div v-if="showGrid" class="grid-dropdown">
      <table>
        <thead>
          <tr>
            <th v-for="col in columns" :key="col.field">{{ col.title }}</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="item in filteredItems"
            :key="item.id"
            @mousedown="selectItem(item)"
          >
            <td v-for="col in columns" :key="col.field">{{ item[col.field] }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: Array,
    columns: Array,
    value: [String, Number, Object]
  },
  data() {
    return {
      searchQuery: '',
      showGrid: false,
      selectedItem: null
    }
  },
  computed: {
    filteredItems() {
      return this.data.filter(item => {
        return this.columns.some(col => {
          return String(item[col.field]).toLowerCase()
            .includes(this.searchQuery.toLowerCase())
        })
      })
    }
  },
  methods: {
    selectItem(item) {
      this.selectedItem = item
      this.searchQuery = item[this.columns[0].field]
      this.showGrid = false
      this.$emit('input', item)
    },
    handleInputBlur() {
      setTimeout(() => {
        this.showGrid = false
      }, 200)
    }
  }
}
</script>

<style>
.combo-grid-container {
  position: relative;
}
.grid-dropdown {
  position: absolute;
  z-index: 1000;
  background: white;
  border: 1px solid #ddd;
  max-height: 300px;
  overflow-y: auto;
}
.grid-dropdown table {
  width: 100%;
}
.grid-dropdown tr:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}
</style>