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>

 

转载于:https://www.cnblogs.com/lhl66/p/9212711.html