elementuiselect组件和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="de" :label="item.name" :value="de">
</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="de" :label="item.name" :value="de">
</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 @row-click="goDetail">
<el-table-column label="xxx所属⼀级单元" align="center">
<template slot-scope="scope">
<span>{{ ion }}</span>
</template>
</el-table-column>
<el-table-column label="xx所属⼆级单元" align="center">
<template slot-scope="scope">
<span>{{wpany }}</span>
</template>
</el-table-column>
<el-table-column label="xx所在城市" align="center">
<template slot-scope="scope">
<span>{{ w.city }}</span>
</template>
</el-table-column>
<el-table-column label="xx项⽬名称" align="center">
<template slot-scope="scope">
<span>{{ w.projectName }}</span>
</template>
</el-table-column>
<el-table-column label="xxx项⽬代码" align="center">
<template slot-scope="scope">
<span>{{ w.afterInvestCode }}</span>
</template>
</el-table-column>
<el-table-column label="xxx项⽬编码" align="center">
<template slot-scope="scope">
<span>{{w.projectNo}}</span>
</template>
</el-table-column>
<el-table-column label="xx获取⽅式" align="center">
<template slot-scope="scope">
<span>{{w.acessWayValue}}</span>
</template>
</el-table-column>
<el-table-column label="xx类型" align="center">
<template slot-scope="scope">
<span>{{w.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 </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;
},
//当前页改变
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
},
//查询数据
searchData() {
},
//分页接⼝
getData(currentPage =this.currentPage, pagesize =this.pagesize) {
let data = {
pageNo: currentPage,
pageSize: pagesize,
projectName: this.projectaName, //xx名称
proviceCode: this.proviceName, //省份
cityCode: this.cityNames, //城市
accessWay: WayValue, //xxx⽅式
}
projectList(data).then(res => {
console.log(res)
if (de ==0) {
if (res.data.projectList !=null) {
this.projectData = res.data.projectList.list; //赋值列表数据
}
}).catch(err => {
this.$message({
showClose: true,
message: '服务器内部错误'
});
})
},
//获取顶部的select基础数据
getProjectType() {
projectType(null).then(res => {
console.log(res)
if (de ==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 => { //下标⽅法de == value
})
this.cityList =this.proviceList[fIndex].childrens //数组
if (this.cityList.length) {
this.cityNames =this.cityList[0].code; //名字
} else {elementui登录界面
this.cityNames =''; //名字
}
}
},
created() {
}
}
</script>
<style lang="scss" scoped>
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。