VUE 实现后台管理的搜索功能

        <!-- el-form :inlin 一行显示 -->
        <el-form :inline="true" :model="formSearch" ref="formInline">
          <el-row>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  v-model="formSearch.keyword"
                  placeholder="根据文章标题搜索"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态">
                <el-select v-model="formSearch.state" placeholder="请选择">
                  <el-option
                    v-for="item in baseApistatus"
                    :key="item.id"
                    :label="item.value"
                    :value="+item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button @click.native="clearFrom">清除</el-button>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-col>
            <!-- offset 列偏移 -->
            <el-col :span="2" :offset="5">
              <el-button type="success" icon="el-icon-edit" @click="addArticles"
                >新增技巧</el-button
              >
            </el-col>
          </el-row>
        </el-form>

      

 部分代码

 data () {
    return {
      disabled: true,
      formSearch: {
        keyword: '', // 关键字
        stateL: '', // 状态
        page: 1, // 当前页
        pagesize: 5 // 每页条数
      }, 
    },
    methods: {
    // 搜索
    async onSubmit () {
      // console.log()
      this.formSearch.page = 1
      this.getArticleList(this.formSearch) // 获取文章列表
    },

    // 格式化表单数据
    clearFrom () {
      this.formSearch = {
        keyword: '', // 关键字
        stateL: '', // 状态
        page: 1, // 当前页
        pagesize: 5 // 每页条数
      }
      this.getArticleList() // 重新获取文章列表
      // this.$refs.formInline.resetFields()
    },  

    // 获取列表
    async getArticleList () {
      // console.log(this.formSearch)
      // this.loading = true
      const { data: res } = await reqList(this.formSearch) // 获取文章列表
      console.log(res)
      this.articleList = res.items // 文章渲染
      this.total = res.counts // 总条数
      this.loading = false
    },
    // 2.每页条数显示改变时
    handleSizeChange (newSize) {
      this.formSearch.pagesize = newSize // 赋值给表单绑定的页码条数
      this.formSearch.page = 1 // 然后去第一页
      this.getArticleList() // 获取文章列表
    },
    // 3.页码值改变时
    handleCurrentChange (newPage) {
      this.formSearch.page = newPage // 赋值给表单绑定的页码
      this.getArticleList() // 获取文章列表
    },
    // 4.序号处理
    indexMethod (index) {
      // index是从零开始
      return index + 1 + (this.formSearch.page - 1) * this.formSearch.pagesize
    },
    
}