el-table 翻页多选、选择框禁选

el-table 翻页多选、选择框禁选

1、翻页多选

实现::row-key="getRowKeys" 配合:reserve-selection="true"

bash 复制代码
<el-table
   :data="list"
   :row-key="getRowKeys"
   ref="multipleTable"
   @selection-change="handleSelectionChange"
 >
   <el-table-column type="selection" width="35" :reserve-selection="true"> </el-table-column>
</el-table>


methods: {
	getRowKeys(row){
       return row.id
    }
}

2、选择框禁选

实现:type="selection"的列绑定selectable方法。

bash 复制代码
<el-table-column
    type="selection"
    width="50"
    :selectable="selectEnable">
</el-table-column>

methods: {
	selectEnable(row, rowindex) {
	  // 这里可以根据数据某个特性控制是否禁止选择
      return true;
    },
}
相关推荐
假装我不帅11 分钟前
jquery-validation使用
前端·javascript·jquery
怕浪猫16 分钟前
React从入门到出门第六章 事件代理机制与原生事件协同
前端·javascript·react.js
天府之绝20 分钟前
uniapp 中使用uview表单验证时,自定义扩展的表单,在改变时无法触发表单验证处理;
开发语言·前端·javascript·vue.js·uni-app
局外人LZ32 分钟前
libsodium.js:web端与 Node.js 的现代加密工具集,构建前端安全加密体系
前端·javascript·node.js
xkxnq37 分钟前
第二阶段:Vue 组件化开发(第 20天)
前端·javascript·vue.js
哈__40 分钟前
React Native 鸿蒙跨平台开发:Keyboard 键盘控制
javascript·react native·react.js
lili-felicity41 分钟前
React Native 鸿蒙跨平台开发:TextInput 数据键盘实现与最大文字长度限制
javascript·react native·react.js·harmonyos
光影少年41 分钟前
electron通信方式有哪些?
前端·javascript·electron
meichaoWen1 小时前
【nodejs】nodejs的一些基础知识
开发语言·前端·javascript
@Autowire1 小时前
Grid-grid-template-areas 属性
前端·javascript·css