vue+element查询功能（含树形列表查询）

 效果图如下：

 html部分

    <el-form :inline="true" :model="searchForm">
      <el-form-item label="填报单位" prop="org">
        <el-dialog
          width="30%"
          append-to-body
          title="选择区域"
          :visible.sync="visiblePopover"
        >
          <el-tree
            :data="orgNoOptions"
            :props="orgListTreeProps"
            node-key="orgNo"
            ref="orgListTree"
            @current-change="orgListTreeCurrentChangeHandle"
            default-expand-all
            :expand-on-click-node="false"
          >
          </el-tree>
        </el-dialog>
        <!-- <el-button @click="visiblePopover = true">{
   
   {
          searchForm.orgName || '点击选择所属机构'
        }}</el-button> -->
        <el-button @click="visiblePopover = true">{
   
   { back }}</el-button>
      </el-form-item>
      <el-form-item label="年份" prop="closeyear">
        <el-date-picker
          type="year"
          placeholder="选择年份"
          v-model="searchForm.year"
          style="width: 130px"
          format="yyyy"
          value-format="yyyy"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="任务填报状态" prop="status">
        <el-select
          style="width: 130px"
          v-model="searchForm.status"
          clearable
          placeholder="任务填报状态"
        >
          <el-option label="填写中" value="0"></el-option>
          <el-option label="已完成" value="1"></el-option>
          <el-option label="已删除" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>

之前一直有个误区那就是一定要在data里声明，原来不需要，只需要在查询的那个方法里，把参数传到后台即可。之前还有个误区就是一定要写prop值里的字段，实际上，写好v-model里的字段即可。

重点就是在prams里把参数传递给后台

script{

  // 获取数据列表
    getDataList () {
      let that = this;
      // 先注释掉请求，用假数据调试先
      // this.dataList = this.treeDataTranslate(data.menuList, '', 'parentId', 'childrens')
      // console.log('this.dataList', this.dataList)
      this.$http({
        url: '/task/info/list',
        method: 'get',
        params: {
          'page': this.pageIndex,
          'limit': this.pageSize,
          'org': this.searchForm.org,
          'year': this.searchForm.year,
          'status': this.searchForm.status,
          'startTime': this.searchForm.startTime,
          'endTime': this.searchForm.endTime,
        }
      }).then(({ data }) => {
        // console.log(data);
        // that.dataList = that.treeDataTranslate(data.page.records, 'id', 'pid', 'childrens')
        if (data && data.code === 0) {
          // this.dataList = data.page.records
          that.initDataList = data.page;
          that.dataList = that.treeDataTranslate(data.page, 'id', 'parentId', 'childrens')
          // this.totalPage = data.page.total
          this.back = '点击选择所属机构'
        } else {
          this.dataList = []
          this.totalPage = 0
        }

      })
    },





}