vue3+element-plus+js 对列表查询/重置条件 组件简单封装

<template>
  <el-form inline :model="form">
    <el-form-item label="关键词">
      <el-input v-model="form.keyword" placeholder="请输入关键词" clearable></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script setup>
import { reactive, ref } from 'vue';
 
const emit = defineEmits(['search', 'reset']);
const form = reactive({
  keyword: ''
});
 
function search() {
  emit('search', form);
}
 
function reset() {
  form.keyword = '';
  emit('reset', form);
}
</script>

这段代码使用了Vue 3的 <script setup> 语法糖，结合Element Plus UI框架，实现了一个简单的查询表单的封装。用户可以输入关键词进行搜索，也可以重置表单。通过自定义事件，可以在父组件中监听这些操作并执行相应的逻辑。