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

关注

原创最新推荐文章于 2026-09-02 15:49:40 发布 704 阅读 AI 写同款· GEO 优化 ›

Gemini 2.5 Pro：手绘草图生成可运行Web应用的UI新范式 UI生成正从‘代码补全’迈向‘意图直译’阶段——多模态大模型通过理解手绘草图与自然语言描述，直接输出可交付的Web应用。其核心原理在于跨模态对齐构建视觉-语义联合嵌入空间，并结合工程上下文感知实现原生HTML/CSS/JS或p5.js等轻量框架的零配置落地。这种能力显著降低交互原型开发门槛，尤其适用于教育编程、快速验证、创意编码及前端协作场景；p5.js因其‘视觉即逻辑’的API设计，成为当前最适配该范式的前端技术栈之一。阅读详情

表格分页注意点

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>

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()
    },
}