el-table选框选中和整行选中

1、点击整行时触发的事件 @row-click

2、获取列表选中的数据一定要用@select-change，不能用@select，因为@select只有点每行前面的选框才会触发这个事件，而@select-change不管选择任意地方都能选中并且触发它，用来接收选中的数据。

3、handleSelectable 有些数据不能被选中，需要禁用

 <el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"border:header-cell-style="{'text-align':'center', 'background': '#f8f8f8', 'color': '#333', 'font-weight': '500'}":cell-style="{'text-align':'center'}"highlight-current-row@row-click="handleRowClick"@select-change="handleSelectRow"><el-table-column type="selection" width="55" :selectable="handleSelectable"></el-table-column><el-table-column  prop="userName" label="用户名"></el-table-column><el-table-column prop="orgName" label="地区"></el-table-column><el-table-column prop="uid" label="uid"></el-table-column></el-table>

// 部分数据不能被选，选框禁用
handleSelectable (row, index) {console.log(this.parentTableData, this.parentTableData.includes(row.uid), row.uid)if (!this.parentTableData.includes(row.uid)) {return true}},// 部分数据不能被选，整行不能选中
handleRowClick (row) {if (!this.parentTableData.includes(row.uid)) {this.$refs.multipleTable.toggleRowSelection(row)// 获取当前选中的数据const _selectData = this.$refs.multipleTable.selectionthis.handleSelectRow(_selectData)}},handleSelectRow (row) {this.tableSelectedRows = row}

el-table选框选中和整行选中相关推荐

layui table勾选框的修改_Layui默认选中table的CheckBox复选框方法_飛雲_前端开发者...
方法一:如何根据条件判断是否默认选中table表格前面的复选框 table.render({ elem: '#userTable' , url: '../sysRole/getUserList' , ...
dataGruidView整行选中
选中 //你选中的第0行的第0个单元格 SelectedRows[0]整行选中string id = dataGridView1.SelectedRows[0].Cells[0].Value.ToSt ...
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
jQuery操作复选框checkbox技巧总结 --- 设置选中.取消选中.获取被选中的值.判断是否选中等一.checked属性定义先了解下input标签的checked属性: 1.HTML &l ...
html 表格，列表，表单，select和下拉选框，textarea多行文本域，label关联控件，表单，浮动框架，结构化标签
1. 表格表格的语法 (1) table标签: 表示表格的开始和结束.表格的所有内容都需要写在这一对标签里 (2) tr标签: 表示表格中的一行 table row (3) td标签:要写在tr中, ...
DataGridView 单击选中一整行，只能单选，不能选择多行，只能选择一行
this.GridView1.SelectedIndex = -1; 设置DataGridView的属性SelectionMode为FullRowSelect 这样就使DataGridView不是选择 ...
JS判断HTML中创建的单选框、复选框、下拉列表框是否被选中
目录一.单选框: 二.复选框: 三.下拉列表框: 一.单选框: 有如下单选框:radio <div class="form-text">性别:</div> ...
hexo中加入点击出现小红心的特效会导致无法双击选中和连续点击三次选中一整行的操作...
文章目录问题描述解决个人博客: https://mmmmmm.me 源码: https://github.com/dataiyangu/dataiyangu.github.io 问题描述如题, ...
C# WinForm DataGridView单击选中一整行，只能单选
设置DataGridView的属性SelectionMode为FullRowSelect 这样就使DataGridView不是选择一个字段,而是选择一整行了设置DataGridView的属性Mult ...
vue获取table一列数据_vue表格含有一列多选框，如何获取被选中的行的数据？
1.仿照element-ui官网贴出的demo,table表格多选,选择多行数据时使用 Checkbox.但是无法获取this.multipleSelection的值.相关代码如下: 男女个人团 ...

el-table选框选中和整行选中

el-table选框选中和整行选中相关推荐

最新文章

热门文章