element el-table 表格分页记忆功能和禁止选择项

表格分页注意点

1、表格添加 row-key，行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。
2、表格添加selection-change事件 当选择项发生变化时会触发该事件

html

  <el-table
    ref="dataTable"
       v-loading="loading"
       :data="tableDate"
       //  row-key
       :row-key="getRowKey"
       border
       // 选中事件
       @selection-change="handleTerSelectionChange"
     >
      <el-table-column
         type="selection"
         :selectable="checkSelectable"
         :reserve-selection="true"
         width="40"/>
       <el-table-column prop="name" label="名称" align="center"/>
       <el-table-column prop="number" label="IP数量" align="center" width="120"/>
       ...
 </el-table>
// 分页
 <el-pagination
    @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
     :current-page="current"
     :page-sizes="[10, 20, 30, 50]"
     :page-size="size"
     layout="total, sizes, prev, pager, next, jumper"
     :total="total"
   >
   </el-pagination>

js

data() {
    return {
    	current: 1,
    	size: 10,
    	total: 0,
    	tableData: [],
    	multipleSelection: []
	}
},
methods: { 

	getDate() {
		...获取数据
	},

	getRowKey(row) {
	  return row.id
	},
	// 禁止选择
	checkSelectable(row) {
		// id 为1 的所在行不能被选中
		return row.id === 1
	},
	// 选中事件
   	handleSelectionChange(val) {
      this.multipleSelection = val
    },
	// 分页修改煤业多少条
    handleSizeChangeSign(val) {
      this.size = val
      this.getTsList(this.terSearchForm)
    },
    // 分页修改页数
    handleCurrentChangeSign(val) {
      this.current = val
      this.getDate()
    },
}