Vue+element实现搜索功能

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/jdrunk/article/details/102692824

组件 - 搜索框

<el-col :span="19">
  <el-form :inline="true">
      <el-form-item label="栏目名">
      <el-input v-model="param.name"  placeholder="栏目名关键字"></el-input>
      </el-form-item>
      <el-form-item >
      <div style="text-align:right">
          <el-button type="primary" @click="searchHandler">查询</el-button>   //定义searchHandler函数
      </div>
      </el-form-item>
  </el-form>
  </el-col>  

实现功能

 data(){
        return{
            name:'分类管理',
            categories:{
                list:[]
            },                     
            centerDialogVisible: false ,
            form:{},
            sels:[],
            param:{          //定义参数
                name:'',
                page:0,
                pageSize:5
            }         
        }
    },
    methods:{
        searchHandler(){       
            this.loadCategories();   
        }，
        async loadCategories(){
            let response=await axios.post('/category/query',this.param);
            this.categories=response.data.data;
        }
     }

与分页一起完成