el-table的selection多选表格改为单选

news/2024/12/22 11:09:04/

需求场景: 选择表格数据时,需要控制单条数据的操作按钮是否禁用。

效果图: 

html代码:

<div><el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55"> </el-table-column><el-table-column label="日期" width="120"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-column prop="name" label="姓名" width="120"> </el-table-column><el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column></el-table><div style="margin-top: 20px"><!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> --><el-button @click="toggleSelection()">取消选择</el-button></div></div>

js代码:

export default {data() {return {tableData: [{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-08",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-06",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-07",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},],multipleSelection: [], // 多选存储数据checkedSelection: {}, // 单选存储数据};},mounted() {document.onclick = () => {console.log('单选--checkedSelection', this.checkedSelection);}},methods: {toggleSelection(rows) {if (rows) {rows.forEach((row) => {this.$refs.multipleTable.toggleRowSelection(row);});} else {this.$refs.multipleTable.clearSelection();}},// 设置单选主要代码handleSelectionChange(val) {console.log('val--==', val);// 默认多选// this.multipleSelection = val;// 单选if(val.length == 1){let item = val[val.length -1];this.checkedSelection = JSON.parse(JSON.stringify(item));}// 单选选中多条时,需要清空所选数据if(val.length > 1){this.$refs.multipleTable.clearSelection(); // 清空选项this.$refs.multipleTable.toggleRowSelection(val.pop()); // 选中最后点击的数据}// 取消选中if(val.length == 0){this.checkedSelection = {};}},},
};

css代码: 

<style lang="less" scoped>
// 禁用table全选按钮
.table-wrap{/deep/.el-table__header{.el-checkbox{display: none;}}
}
</style>


http://www.ppmy.cn/news/1475705.html

相关文章

【Pytorch实战教程】对抗样本生成中是如何添加噪声的?

文章目录 对抗样本中添加随机生成的对抗噪声代码解析应用场景示例代码对抗样本中添加随机生成的对抗噪声 通常在对抗训练或者生成对抗样本时使用,目的是为了稍微扰动模型的输入数据,从而测试或增强模型在面对输入数据轻微变化时的鲁棒性。 x = x + torch.zeros_like(x).uni…

普中51单片机:串口通信原理与应用指南(八)

文章目录 引言接口及引脚定义硬件电路电平标准常见通信接口比较51单片机的UART工作模式串口参数及时序图波特率&#xff08;Baud Rate&#xff09;数据位&#xff08;Data Bits&#xff09;校验位&#xff08;Parity Bit&#xff09; 串口相关寄存器串口控制寄存器SCON电源控制…

k8s怎么配置secret呢?

在Kubernetes中&#xff0c;配置Secret主要涉及到创建、查看和使用Secret的过程。以下是配置Secret的详细步骤和相关信息&#xff1a; ### 1. Secret的概念 * Secret是Kubernetes用来保存密码、token、密钥等敏感数据的资源对象。 * 这些敏感数据可以存放在Pod或镜像中&#x…

Hive 常见问题

Hive 内部表和外部表的区别 外部表在创建时需要加关键字 external&#xff1b;创建内部表时&#xff0c;会将数据移动到数据仓库指定的路径&#xff1b;创建外部表时&#xff0c;不会移动数据&#xff0c;只会记录数据所在的路径&#xff1b;删除内部表时&#xff0c;会删除元…

爬虫技术探索:Node.js 的优势与实践

在大数据时代&#xff0c;数据挖掘与分析成为了企业和研究机构的重要工作之一。而网络爬虫作为获取公开网络数据的关键工具&#xff0c;其重要性不言而喻。在众多编程语言中&#xff0c;Node.js 因其异步非阻塞I/O模型、丰富的第三方库支持以及与现代Web技术的紧密集成&#xf…

Android系统上常见的性能优化工具

Android系统上常见的性能优化工具 在Android系统开发中&#xff0c;性能优化是一个重要的任务&#xff0c;有许多工具可以帮助你进行各种方面的性能分析和优化。以下是一些常见的Android性能优化工具及其用途和使用方法&#xff1a; 1. Android Studio Profiler 功能: 提供CP…

qt 创建一个矩形,矩形的边线可以拖拽

在Qt中&#xff0c;要创建一个矩形&#xff0c;其边线可以拖拽&#xff0c;你可以使用QGraphicsView和QGraphicsScene来实现。以下是一个简单的示例&#xff0c;展示如何创建一个矩形&#xff0c;并且它的边线可以被拖拽来改变矩形的大小。 首先&#xff0c;你需要包含必要的Q…

vs code 启动react项目,执行npm start报错原因分析

1.执行 npm start错误信息&#xff1a;npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&#xff0c;请确保路径正确&#xff0c;然后再试一次。 所在位置 行:1 字符: 1 npm start ~~~ CategoryInfo …