vue实现更多搜索条件

Vue 实现更多搜索条件的方法

在 Vue 中实现更多搜索条件可以通过动态表单、组件化设计以及状态管理来实现。以下是几种常见的方法：

动态添加搜索条件

使用 v-for 动态渲染搜索条件，结合数组管理条件项。可以通过按钮触发添加或删除条件。

<template>
  <div>
    <div v-for="(condition, index) in conditions" :key="index">
      <select v-model="condition.field">
        <option value="name">名称</option>
        <option value="age">年龄</option>
      </select>
      <input v-model="condition.value" placeholder="输入值" />
      <button @click="removeCondition(index)">删除</button>
    </div>
    <button @click="addCondition">添加条件</button>
    <button @click="search">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      conditions: [{ field: '', value: '' }]
    }
  },
  methods: {
    addCondition() {
      this.conditions.push({ field: '', value: '' })
    },
    removeCondition(index) {
      this.conditions.splice(index, 1)
    },
    search() {
      const query = this.conditions.reduce((acc, curr) => {
        if (curr.field && curr.value) {
          acc[curr.field] = curr.value
        }
        return acc
      }, {})
      console.log(query)
    }
  }
}
</script>

使用组件封装搜索条件

将搜索条件封装为可复用的组件，提升代码的可维护性。

<template>
  <div>
    <search-condition
      v-for="(condition, index) in conditions"
      :key="index"
      :condition="condition"
      @update="updateCondition(index, $event)"
      @remove="removeCondition(index)"
    />
    <button @click="addCondition">添加条件</button>
    <button @click="search">搜索</button>
  </div>
</template>

<script>
import SearchCondition from './SearchCondition.vue'

export default {
  components: { SearchCondition },
  data() {
    return {
      conditions: [{ field: '', value: '' }]
    }
  },
  methods: {
    addCondition() {
      this.conditions.push({ field: '', value: '' })
    },
    removeCondition(index) {
      this.conditions.splice(index, 1)
    },
    updateCondition(index, condition) {
      this.conditions.splice(index, 1, condition)
    },
    search() {
      const query = this.conditions.reduce((acc, curr) => {
        if (curr.field && curr.value) {
          acc[curr.field] = curr.value
        }
        return acc
      }, {})
      console.log(query)
    }
  }
}
</script>

使用 Vuex 管理搜索状态

在大型应用中，可以使用 Vuex 集中管理搜索条件的状态。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    conditions: [{ field: '', value: '' }]
  },
  mutations: {
    ADD_CONDITION(state) {
      state.conditions.push({ field: '', value: '' })
    },
    REMOVE_CONDITION(state, index) {
      state.conditions.splice(index, 1)
    },
    UPDATE_CONDITION(state, { index, condition }) {
      state.conditions.splice(index, 1, condition)
    }
  },
  actions: {
    search({ state }) {
      const query = state.conditions.reduce((acc, curr) => {
        if (curr.field && curr.value) {
          acc[curr.field] = curr.value
        }
        return acc
      }, {})
      console.log(query)
    }
  }
})

结合第三方 UI 库

使用如 Element UI 或 Ant Design Vue 等 UI 库可以快速实现复杂的搜索表单。

<template>
  <el-form>
    <el-form-item v-for="(condition, index) in conditions" :key="index">
      <el-select v-model="condition.field" placeholder="选择字段">
        <el-option label="名称" value="name"></el-option>
        <el-option label="年龄" value="age"></el-option>
      </el-select>
      <el-input v-model="condition.value" placeholder="输入值"></el-input>
      <el-button @click="removeCondition(index)">删除</el-button>
    </el-form-item>
    <el-button @click="addCondition">添加条件</el-button>
    <el-button type="primary" @click="search">搜索</el-button>
  </el-form>
</template>

通过以上方法，可以灵活实现 Vue 中的更多搜索条件功能，根据项目需求选择合适的方式。