fara-fe-admin/src/views/role-management/components/SearchForm.vue

<script setup lang="ts">
import { Refresh, Search } from '@element-plus/icons-vue'
import { ElButton, ElCol, ElForm, ElFormItem, ElInput, ElOption, ElRow, ElSelect } from 'element-plus'
import { ref } from 'vue'
type TSearchParams = {
  nameOrTags: string,
}
interface Props {
  modelValue: TSearchParams
  loading?: boolean
}

interface Emits {
  (e: 'update:modelValue', value: TSearchParams): void
  (e: 'search'): void
  (e: 'reset'): void
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
})

const emit = defineEmits<Emits>()


const formRef = ref()

const searchParams = computed({
  get: () => props.modelValue,
  set: value => emit('update:modelValue', value),
})

/**
 * 搜索
 */
function handleSearch() {
  emit('search')
}

/**
 * 重置
 */
function handleReset() {
  formRef.value?.resetFields()
  emit('reset')
}

function handleClear() {
  // 清空后自动触发搜索
  handleSearch()
}
</script>

<template>
  <ElForm  :inline="true"  ref="formRef" :model="searchParams" label-width="80px">
      <ElFormItem label="名称" prop="nameOrTags" label-width="120">
          <ElInput v-model="searchParams.nameOrTags" placeholder="请输入" clearable
              @clear="handleClear" />
          </ElFormItem>
          <ElFormItem>
            <ElButton type="primary" :icon="Search" :loading="loading" @click="handleSearch">
              查询
            </ElButton>
            <ElButton :icon="Refresh" @click="handleReset">
              重置
            </ElButton>
          </ElFormItem>
    </ElForm>
</template>