Vue3基于element-plus的搜索实现

搜索功能的实现
本案例用到vue3、composition_API、vuex、element-plus框架

<template>
  <el-button @click="searchClick()"></el-button>
</template>

第一种情况：后端字符串判断是否传入的字符为空，如果为空则忽略

 setup() {
    //调用useStore()
    const store = useStore();
    //交给服务器和v-model绑定的数据
    const search = reactive({
      page: 1,
      pageSize: 10,
      cre_time: "",
      end_time: "",
      card_id: "",
      pay_type: "",
    });
    //注册点击事件
    const searchClick = () => {
      //将数据分发到vuex进行处理，将数据解构
      store.dispatch("searchAction", { ...search });
    };

    return { searchClick };

第二种情况：后端不进行处理，前端处理代码

export default defineComponent({
  components: {},
  setup() {
    //调用useStore()
    const store = useStore();
    //交给服务器和v-model绑定的数据
    const search = reactive({
      page: 1,
      pageSize: 10,
      cre_time: "",
      end_time: "",
      card_id: "",
      pay_type: "",
    });
    //定义要传入服务器的数据
    //搜索
    let counts = {
      page: 1,
      pageSize: 10,
    };

    //注册点击事件
    const searchClick = () => {
      //找出字符串不为空的循环遍历添加到新对象中，并将新的对象传给服务器
      for (let item in search) {
        if (search[item].length > 0 && search[item].trim()) {
          counts[item] = search[item];
        }
        //还原数组
        counts = {
          page: 1,
          pageSize: 10,
        };
      }
      //将数据分发到vuex进行处理，将数据解构
      store.dispatch("searchAction", { ...counts });
    };

    return { searchClick };
  },
});
</script>

Vuex中的处理逻辑

export default Module;

const Module = {
    namespaced: true,
    state() {
      return {
        pageData: [],
        total: []
      }
    },
    getters: {},
    mutations: {
      //将获取到的数据保存到state
      getListCommit(state, playLoad) {
        state.pageData = playLoad
      }
    },
    actions: {
      async searchListAction({ commit }, playLoad) {
        //请求服务器接口 并且将传过来的数据传给服务器
        const result = await searchList(playLoad)
        //判断服务器状态
        if (result.code == 200) {
        //如果请求成功则需要刷新一下获取的列表，需要调用一下列表的接口
        const result = await getList(playLoad)
        //将服务器获取的数据交给mutations
        commit('getListCommit', result.data.list)
        }
      }
    }
  }
  
  export default Module

service中的逻辑

//从服务器获取数据，并将数据传给data
export function searchListService(obj) {
  //封装一个axios请求
  return request({
    method: 'post',
    url: '服务器地址',
    data: obj
  })
}

搜索功能实现完成