element ui select组件和table做分页完整功能和二级联动效果

<template>
  <div class="index_box">
    <!-- 搜索条件 -->
    <div class="search_box">
      <el-form :label-position="labelPosition" inline size="small">
        <el-form-item label="项目名称">
          <el-input v-model="projectaName" placeholder="请输入项目名称"></el-input>
        </el-form-item>
        <el-form-item label="所属一级单元">
          <el-select v-model="firstUnit" placeholder="请选择" @change="getSecondUnit">
            <el-option v-for="(item,index) in companyInfo" :key="item.code" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属二级单元">
          <el-select v-model="secondUnit" placeholder="请选择">
            <el-option v-for="(item,index) in componyList" :key="item.code" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <!--  <el-form-item label="业务类型">
          <el-select v-model="businessTypeValue" placeholder="请选择">
            <el-option v-for="(item,index) in businessType" :key="index+1" :label="item" :value="index+1">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="获取方式">
          <el-select v-model="getWayValue" placeholder="请选择">
            <el-option v-for="(item,index) in accessWays" :key="index+1" :label="item.paramValue" :value="index+1">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="search_btn_box fr">
        <el-button type="primary" size="mini" icon="el-icon-search" @click="searchData">查询</el-button>
        <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="goNewProject">新增</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table_box mt40">
      <el-table :data="projectData" border style="width: 100%" @row-click="goDetail">
        <el-table-column label="xxx所属一级单元" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.region }}</span>
          </template>
        </el-table-column>
        <el-table-column label="xx所属二级单元" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.company }}</span>
          </template>
        </el-table-column>
        <el-table-column label="xx所在城市" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.city }}</span>
          </template>
        </el-table-column>
        <el-table-column label="xx项目名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.projectName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="xxx项目代码" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.afterInvestCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="xxx项目编码" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.projectNo}}</span>
          </template>
        </el-table-column>
        <el-table-column label="xx获取方式" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.acessWayValue}}</span>
          </template>
        </el-table-column>
        <el-table-column label="xx类型" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.assetPropertyValue}}</span>
          </template>
        </el-table-column>
        <!--   <el-table-column label="业务类型" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.businessType}}</span>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 分页 -->
      <div class="page_box fr mt20">
        <el-pagination class="el-paging" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" :background='true' prev-text="上一页" next-text="下一页">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { projectList, projectType } from '../../http/api'
export default {
  data() {
    return {
      labelPosition: 'right',
      accessWays: [], //获取方式
      companyInfo: [], //一级单元
      componyList: [], //二级单元
      currentPage: 1, //当前页数
      pagesize: 10, //每页显示多少条
      total: 0, //默认数据总数
      pageCount: 0, //总页数
      projectaName: '', //项目名称
      firstUnit: '', //所属一级单元
      secondUnit: '', //所属二级单元
      //businessTypeValue: '', //业务类型
      getWayValue: '', //获取方式
      projectList: {}, //项目档案list
      projectData: [],
    }
  },
  methods: {
    //项目档案新增界面
    goNewProject() {
      this.$router.push({ name: 'newProjectArchives' })
    },
    //项目档案详情界面
    goDetail(row, event, column) {
      this.$router.push({ name: 'projectArchivesDetail', query: { projectNo: row.projectNo } })
    },
    // 分页
    handleSizeChange(size) {
      this.pagesize = size;
      this.getData(this.currentPage, size);
    },
    //当前页改变
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getData(this.currentPage);
    },
    //查询数据
    searchData() {
      this.getData();
    },
    //分页接口
    getData(currentPage = this.currentPage, pagesize = this.pagesize) {
      let data = {
        pageNo: currentPage,
        pageSize: pagesize,
        projectName: this.projectaName, //项目名称
        regionCode: this.firstUnit, //一级单元
        companyCode: this.secondUnit, //二级单元
        // businessType: this.businessTypeValue == '' ? '' : this.businessType.indexOf(this.businessTypeValue) + 1, //业务类型
        accessWay: this.getWayValue, //获取方式
      }
      projectList(data).then(res => {
        console.log(res)
        if (res.code == 0) {
          if (res.data.projectList != null) {
            this.projectData = res.data.projectList.list; //赋值列表数据
            this.total = res.data.totalRecords; //设置数据总数目！！！
          }
        }
      }).catch(err => {
        this.$message({
          showClose: true,
          message: '服务器内部错误'
        });
      })
    },
    //获取顶部的select基础数据
    getProjectType() {
      projectType(null).then(res => {
        console.log(res)
        if (res.code == 0) {
          this.accessWays = res.data.accessWays; //获取方式
          this.companyInfo = res.data.companyInfo; //区域公司数据
        }
      }).catch(err => {
        this.$message({
          showClose: true,
          message: '服务器内部错误'
        });
      })
    },
    //onchange事件
    getSecondUnit(value) {
      let fIndex = this.companyInfo.findIndex(e => { //下标方法
        return e.code == value
      })
      this.componyList = this.companyInfo[fIndex].childrens //数组
      if (this.componyList.length) {
        this.secondUnit = this.componyList[0].code; //名字
      } else {
        this.secondUnit = ''; //名字
      }
      //console.log(this.componyList, 'chengshishuzu')
    }
  },
  created() {
    this.getData();
    this.getProjectType();
  }
}

</script>
<style lang="scss" scoped>
.index_box {
  position: absolute;
  left: 210px;
  right: 0;
  top: 60px;
  padding: 15px 15px;
  box-sizing: border-box;
}

</style>