实现可清空的input和重置按钮

方法一：

实现可清空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()//调用查询方法更新表格数据
    }
}