博客

为实现elemeny-ui中table表格可以跨页选择数据做记录

1.在el-table 中添加**@selectiοnchange=“handleSelectionChange”** 和

:row-key=“getRowKeys”


el-table-column 中添加

:reserve-selection=“true”

（仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key））

  <el-table size="mini" :data="dataList" border v-loading="dataListLoading" @selectionchange="handleSelectionChange" style="width: 100%;"  :row-key="getRowKeys">
      <el-table-column type="selection" width="55" :reserve-selection="true" :selectable='checkboxSelect'> </el-table-column>
      <el-table-column prop="name" header-align="center" align="center" label="名称"></el-table-column>
      <el-table-column prop="month" header-align="center" align="center" label="月份"></el-table-column>
  </el-table>

2.添加handleSelectionChange() 方法，selList为选中的数据

export default {
	data(){
		return{
			selList:[],
	        getRowKeys(row) {//记录每行的key值
	          	return row.id;
	        },
		}
	},
	methods:{
		 handleSelectionChange(rows) {
	        this.selList = rows;
	     },
	     
	}
}

3.如果需要对选择框进行禁用的话，加上 :selectable=‘checkboxSelect’

 <el-table-column type="selection" width="55" :reserve-selection="true" :selectable='checkboxSelect'> </el-table-column>

checkboxSelect(row, rowIndex) {
    if (row.status == 2 || row.status == 13 ) {
      return true //不禁用
    } else {
      return false //禁用
    }
},