el-selected操作人清空问题

程序猿11111

于 2022-08-17 13:53:46 发布

阅读量511

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_44663523/article/details/126384499

版权

博客讲述了在前端开发中，遇到的一个问题：点击按钮后弹出的对话框内选择的筛选条件在关闭对话框后仍保留，导致再次打开对话框时仍显示上次的选择。解决方案是在对话框关闭时清空筛选条件（如操作人姓名）的v-model绑定值，确保每次打开都是初始状态。代码示例中展示了如何在`@close`事件中实现这一功能。

摘要由CSDN通过智能技术生成

1.点击按钮🔘，会弹出对话框

根据操作人筛选和它相关的数据

问题：一开始我点击操作按钮，弹出对话框，我选择姓名，关闭该对话框，重新点击别的操作按钮，他仍然会记得我之前筛选的人名字。

分析：我的名字是 v-model 获取的操作人operators,然后传给后端，后端返回查询后跟该人相关的数据。

所以我们只需每次关闭对话框的时候将operators =''(将其置空即可解决这个问题)！

写在@close 的方法里面

 <el-dialog class="logs"
             @close="closeLogs" 
             v-if="logsVisible"
             :close-on-click-modal="false"
             :visible.sync="logsVisible">
    <span class="logs_btn">
      <label class="logtitle">操作日志</label>
      <el-select  class="opera" v-model="operators" clearable  placeholder="请输入操作人姓名"> 
        <el-option
        v-for="item in operatorsList"
        :key="item"
        :label="item"
        :value="item"
        >
        </el-option>
      </el-select>
      <el-button class="ml-10 yellow-btn compare_btn" type="primary"  @click="compare">对比文件</el-button>
    </span>
</el-dialog>