Element-Plus Autocomplete导致页面重渲染问题求助

首先明确：Ajax请求本身不会导致页面重渲染，你遇到的全页面重渲染问题，大概率是触发了Razor Page的服务器端回发（PostBack），或是代码中存在不必要的页面刷新操作。以下是针对性的解决步骤：

1. 阻止表单默认提交行为 #

Razor Page默认会将页面内容包裹在<form>标签中，若你的Vue组件处于该表单内，某些操作可能意外触发表单的默认提交，导致页面回发。
给表单添加Razor的@submit.prevent修饰符，阻止默认提交逻辑：

<form method="post" @submit.prevent>
    <!-- 你的Vue组件及其他页面内容 -->
</form>

2. 移除重复的响应式赋值 #

在querySearch方法中，你手动赋值_this.OwnerName = queryString，但v-model已经完成了双向绑定，重复赋值会触发不必要的组件更新（虽不会直接导致全页重渲染，但会增加性能开销），建议删除该行：

async querySearch(queryString, cb) {
    var _this = this;
    if (queryString) {
        // 移除该行：_this.OwnerName = queryString;
        let data = await this.getOwnerList(queryString)
        // 其余代码保持不变
    }
}

3. 修复Razor Page的防伪造令牌问题 #

Razor Page要求POST请求携带防伪造令牌，否则会返回400错误，可能间接导致页面异常刷新。需在请求中添加令牌：

• 先在Razor页面中获取令牌（通常页面已自动生成，可直接通过DOM获取）：

async getOwnerList(queryString) {
    var fd = new FormData();
    fd.append('queryString', queryString);
    // 添加防伪造令牌
    fd.append('__RequestVerificationToken', document.querySelector('input[name="__RequestVerificationToken"]').value);
    let result = await $axiosPost(this.localRouter + "?handler=GetOwnerList", fd);
    // 其余代码保持不变
}

也可通过Axios全局拦截器统一添加，避免每个请求重复编写：

axios.interceptors.request.use(config => {
    if (config.method === 'post') {
        const token = document.querySelector('input[name="__RequestVerificationToken"]')?.value;
        if (token) {
            if (config.data instanceof FormData) {
                config.data.append('__RequestVerificationToken', token);
            } else {
                config.data = { ...config.data, __RequestVerificationToken: token };
            }
        }
    }
    return config;
});

4. 排查blur事件的潜在影响 #

暂时注释setBlur方法中的document.activeElement.blur()，测试是否还会触发全页重渲染，排查该操作是否间接触发了表单提交或页面刷新：

setBlur() {                    
    // 暂时注释：document.activeElement.blur()
}

5. 确认Vue挂载范围正确 #

确保Vue实例仅挂载在页面的局部元素上，避免与Razor的服务器端渲染冲突：

<div id="vue-app">
    <el-autocomplete ...></el-autocomplete>
</div>

<script>
const app = Vue.createApp({
    // Options API代码
}).use(ElementPlus).mount('#vue-app');
</script>

内容的提问来源于stack exchange，提问作者Mario