vue+elementUI实现分页表格的单选或者多选、及禁⽌部分选择⼀、vue+elementUI实现分页表格前的多选
多选效果图：
代码如下：
<el-table
ref="multipleTable"
:data="listData"
tooltip-effect="dark"
:default-sort="{ prop: 'date', order: 'descending' }"
:stripe="true"
:max-height="TABLEHEIGHT"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" min-width="55"></el-table-column>
<el-table-column label="ID"  prop="id"  align="left"  width="80"></el-table-column>
<div class="city-list-body-pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
export default class carAcct extends Vue {
private multipleSelection: any = []
private listData: any = []
private currentPage = 1
private total = 0
private pageSize = 20
private TABLEHEIGHT = document.documentElement.clientHeight - 272
private handleSizeChange (e: any) {
this.pageSize = e
this.listPage()
}
private handleCurrentChange (e: any) {
tabletable
this.currentPage = e
this.listPage()
}
private handleSelectionChange (val: any) {
this.multipleSelection = val
}
}
⼀、vue+elementUI实现分页表格前的单选
单选效果图：
主要是使⽤elementUI提供的table中的toggleRowSelection（row, selected）⽅法，
  *该⽅法⽤于多选表格，切换某⼀⾏的选中状态，如果使⽤了第⼆个参数，则是设置这⼀⾏选中与否（selected 为 true 则选中）
这和上⾯的多选差不多完全⼀样，只是在选择⽅法 handleSelectionChange中加上判断：
1if (val.length > 1) {
2      (this.$refs.multipleTable as any).toggleRowSelection(val[0], false)
3      val.splice(0, 1)
4    }
特别说明⼀下：因为我⽤的TypeScript，⽽TypeScript ⼜是强类型检查，所以this.$refs.multipleTable 改成了(this.$refs.multipleTable as any)，不然会报以下错误：
如果不是使⽤的TypeScript，可以直接写成以下格式：
if (val.length > 1) {
this.$leRowSelection(val[0], false)
val.splice(0, 1)
}
总代码如下：
<el-table
ref="multipleTable"
:data="listData"
tooltip-effect="dark"
:default-sort="{ prop: 'date', order: 'descending' }"
:
stripe="true"
:max-height="TABLEHEIGHT"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" min-width="55"></el-table-column>
<el-table-column label="ID"  prop="id"  align="left"  width="80"></el-table-column>
<div class="city-list-body-pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:
page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="total"
></el-pagination>
</div>
export default class carAcct extends Vue {
private multipleSelection: any = []
private listData: any = []
private currentPage = 1
private total = 0
private pageSize = 20
private TABLEHEIGHT = document.documentElement.clientHeight - 272
private handleSizeChange (e: any) {
this.pageSize = e
this.listPage()
}
private handleCurrentChange (e: any) {
this.currentPage = e
this.listPage()
}
private handleSelectionChange (val: any) {
if (val.length > 1) {
(this.$refs.multipleTable as any).toggleRowSelection(val[0], false)
val.splice(0, 1)
}
this.multipleSelection = val
}
}
3、禁⽌部分选择
⾸先我们实现多选: ⼿动添加⼀个el-table-column，设type属性为selection即可；然后设置 selectable 属性来决定该⾏数据是否选中。<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
:selectable="checkSelectable"
width="55">
</el-table-column>
......
</el-table>
</template>
设置禁⽌选中的条件：
checkSelectable(row) {
return row.date == '2016-05-03'
},
若返回为 true，则可以选中，否则禁⽌选中

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