Q-Search 动态搜索框

基础用法

提示

输入框支持 v-bind="$attrs" 和 v-on="$listeners" 透传。

提示

建议使用封装好的QSelector

<template>
  <q-search v-model="searchText" ref="QSearch">
    <template>
      <el-table :data="filterData(searchText)" :max-height="200" @row-click="rowClick">
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </template>
  </q-search>
</template>
<script>
  export default {
    data() {
      return {
        searchText: '123',
        tableData: [
          {date: '2024-01-01', name: 'John Doe', address: '123 Main St'},
          {date: '2024-01-02', name: 'Jane Doe', address: '456 Maple Ave'},
          {date: '2024-01-01', name: 'John Doe', address: '123 Main St'},
          {date: '2024-01-02', name: 'Jane Doe', address: '456 Maple Ave'},
          {date: '2024-01-01', name: 'John Doe', address: '123 Main St'},
          {date: '2024-01-02', name: 'Jane Doe', address: '456 Maple Ave'},
          {date: '2024-01-01', name: 'John Doe', address: '123 Main St'},
          {date: '2024-01-02', name: 'Jane Doe', address: '456 Maple Ave'},
          {date: '2024-01-01', name: 'John Doe', address: '123 Main St'},
          {date: '2024-01-02', name: 'Jane Doe', address: '456 Maple Ave'},
          {date: '2024-01-01', name: 'John Doe', address: '123 Main St'},
          {date: '2024-01-02', name: 'Jane Doe', address: '456 Maple Ave'},
          {date: '2024-01-01', name: 'John Doe', address: '123 Main St'},
          {date: '2024-01-02', name: 'Jane Doe', address: '456 Maple Ave'},
          // Add more entries as needed
        ],
      }
    },
    watch: {
      searchText(newVal) {
        console.log('searchText', newVal);
      }
    },
    methods: {
      filterData(searchText) {
        return this.tableData.filter(item =>
            item.address.includes(searchText)
        );
      },
      rowClick(row) {
        this.searchText = row.address
      }
    }
  }
</script>

占位

WARNING

Expand Copy Copy

Attributes

属性名	说明	类型	可选值	默认值
v-model	数据绑定	String	—	—
width	弹框宽度	Number	—	450
trigger	触发方式	String	—	manual
placement	出现位置	String	—	bottom
placeholder	占位符	String	—	请输入...
readonly	只读	Boolean	—	false