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="xxx">
          <el-input v-model="projectaName" placeholder="請輸入"></el-input>
        </el-form-item>
        <el-form-item label="省份">
          <el-select v-model="proviceName" placeholder="請選擇" @change="getcityNames">
            <el-option v-for="(item,index) in proviceList" :key="item.code" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市">
          <el-select v-model="cityNames" placeholder="請選擇">
            <el-option v-for="(item,index) in cityList" :key="item.code" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="xxx">
          <el-select v-model="getWayValue" placeholder="請選擇">
            <el-option v-for="(item,index) in accessList" :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>
      <!-- 分頁 -->
      <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', accessList: [], //xxx方式
 proviceList: [], //xxx
 cityList: [], //xxx
 currentPage: 1, //當前頁數
 pagesize: 10, //每頁顯示多少條
 total: 0, //默認數據總數
 pageCount: 0, //總頁數
 projectaName: '', //xxx名稱
 proviceName: '', //xxx省份
 cityNames: '', //xxx城市
      //businessTypeValue: '', //xxxx
 getWayValue: '', //xx方式
 projectList: {}, //xxx檔案list
 projectData: [], } }, methods: { //xxx新增界面
 goNewProject() { this.$router.push({ name: 'xxx' }) }, //xxx詳情界面
 goDetail(row, event, column) { this.$router.push({ name: 'xxxx', 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, //xx名稱
 proviceCode: this.proviceName, //省份
 cityCode: this.cityNames, //城市
 accessWay: this.getWayValue, //xxx方式
 } 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.accessList = res.data.accessList; //xxx
          this.proviceList = res.data.proviceList; //xxx
 } }).catch(err => { this.$message({ showClose: true, message: '服務器內部錯誤' }); }) }, //onchange事件
 getcityNames(value) { let fIndex = this.proviceList.findIndex(e => { //下標方法 return e.code == value }) this.cityList = this.proviceList[fIndex].childrens //數組
      if (this.cityList.length) { this.cityNames = this.cityList[0].code; //名字
 } else { this.cityNames = ''; //名字
 }
 } }, created() { this.getData(); this.getProjectType(); } } </script>
<style lang="scss" scoped>

</style>