1.安装 element-ui @2.6.1版本(高版本不支持)
npm install element-ui@2.6.1
2.在table表单中添加 :row-key="getRowKeys" 和 :reserve-selection="true"
reserve-selection -->仅对 type=selection 的列有效,类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据(需指定
row-key
)
<el-table :data.sync="tableData" border height="520" size="small" class="table"
ref="multipleTable"
style="width:100%"
:row-key="getRowKeys"
@sort-change="getSortChange"
@selection-change="handleSelectionChange">
<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
<el-table-column prop="code" label="编号" v-if="show_code"></el-table-column>
<el-table-column prop="title" label="广告名称" v-if="show_title"></el-table-column>
<el-table-column prop="state" label="发布状态" v-if="show_state" >
</el-table>
3.在data的return中定义:
data () {
return {
getRowKeys(row) {
return row.id;
},
multipleSelection: [], // 当前页选中的数据
tableData: [] // 表格数据
}
}
4.js
handleSelectionChange(val){
this.multipleSelection = val;//勾选放在multipleSelection数组中
},