方法一:
实现可清空input
此时,我们查询完成数据后,把输入框内容清空,点击查询按钮可以查询到所有用户信息。现在我们可以在输入框添加一个可以把输入框数据都清空的按钮,点击按钮输入框内容清空同时查询出所有用户信息。
查阅element文档input中有一个可清空输入框,是使用clearable
属性得到的
<!-- 搜索与添加区域 --> <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable>
加上此属性后,点击清空按钮输入框内容确实被清空了,但是表格数据并没有被重置为所有用户信息。查阅文档,input下方有一个clear事件
<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
点击清空按钮成功获取到所有用户信息。
方法二:
重置按钮
点击按钮input输入框内容清空,并且表格显示所有数据(而不是之前查询的数据)
<el-input placeholder="请输入内容" v-model="queryForm.name"> <el-input placeholder="请输入内容" v-model="queryForm.address"> <el-input placeholder="请输入内容" v-model="queryForm.time"> <el-button type="info" @click="reset">重置</el-button>
data(){return{ queryForm:{ name='', address='', time='' }}}, created{ this.getList() }, methods:{ //查询方法(接口和传参写自己的) //tableData是存放表格数据的数组 getList(){ axios.post('').then(res=>{ this.tableData=res.data.data }).catch(err=>{ this.$message.error(res.message) }) }, reset(){ //将输入框内容置空 for(let i in queryForm){ this.queryForm[i]='' } //或者: //this.queryForm.name=''; //this.queryForm.address=''; //this.queryForm.time=''; this.getList()//调用查询方法更新表格数据 } }