1Panel/frontend/src/components/table/TableSearch.vue

<template>
    <div>
        <div class="search-button">
            <el-input
                clearable
                v-model="searchInfo"
                @clear="search()"
                suffix-icon="Search"
                @change="search()"
                :disabled="props.disabled"
                :placeholder="props.placeholder || $t('commons.button.search')"
            ></el-input>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onActivated, ref, watch } from 'vue';
defineOptions({ name: 'TableSearch' });

const emit = defineEmits(['search', 'update:searchName']);
const searchInfo = ref();
const props = defineProps({
    placeholder: String,
    disabled: {
        type: Boolean,
        default: false,
    },
    searchName: {
        type: [String, Number],
        default: undefined,
    },
});

watch(
    () => props.searchName,
    (newVal) => {
        if (searchInfo.value !== newVal) {
            searchInfo.value = newVal;
        }
    },
    { immediate: true },
);

onActivated(() => {
    searchInfo.value = props.searchName;
});

const search = () => {
    emit('update:searchName', searchInfo.value);
    emit('search');
};
</script>