<!-- table -->
<el-table
:data="tableData.slice((pagination.currentPage-1)*pagination.pageSize,pagination.currentPage*pagination.pageSize)"
border
@selection-change="handleSelectionChange"
style="width: 100%"
:row-key="getRowKeys"
>
<el-table-column type="selection" width="55" prop="id" :reserve-selection="true"></el-table-column>
<el-table-column prop="centerId" label="区" width="180" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.centerId == 3" size="medium" type="primary">顺德</el-tag>
<el-tag v-if="scope.row.centerId == 4" size="medium" type="danger">南海</el-tag>
<el-tag v-if="scope.row.centerId == 5" size="medium" type="danger">禅城</el-tag>
<el-tag v-if="scope.row.centerId == 6" size="medium" type="warning">三水</el-tag>
<el-tag v-if="scope.row.centerId == 7" size="medium" type="info">高明</el-tag>
</template>
</el-table-column>
<el-table-column label="成本分类" width="180" align="center">区自选划小</el-table-column>
<el-table-column prop="name" label="成本项目" width="180" align="center"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagination.currentPage"
:page-sizes="[5, 10, 20, 50]"
:page-size="pagination.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total"
></el-pagination>
reserve-selection仅对 type=selection 的列有效,类型为 Boolean,为 true 则代表会保留之前数据的选项,需要配合 Table 的 clearSelection 方法使用
methods: {
getRowKeys(row) {
return row.Id
},
handleSelectionChange(arr){
if(arr.length>0){
this.multipleSelection = arr
}
}
}