vue使用Element UI时,el-table表格整行操作单选禁选并隐藏全选框
需求场景:
需求:表格复选修改为单选,只可选择一个;不满足条件的不可勾选;可进行整行操作
vue中的el-table布局:
注意使用的方法.
-
<el-table
-
ref="tableRef"
-
:key="tableKey"
-
:data="tableData"
-
class="singleTable"
-
@select="handleSelectionChange"
-
@row-click="handleSelectionChange('',$event)">
-
<el-table-column
-
type="selection"
-
width="45"
-
align="center"
-
:selectable="checkboxSelect"/>
-
<el-table-column label="序号" width="60" show-overflow-tooltip align="center">
-
<template slot-scope="scope">{{ scope.$index (page.pageNum - 1) *page.pageSize 1 }}</template>
-
</el-table-column>
-
<el-table-column prop="RANINSTASKNAME" label="名称" show-overflow-tooltip/>
-
<el-table-column prop="ADDRESS" label="地址" show-overflow-tooltip/>
-
</el-table>
单选样式
需求由复选改为单选后,左上角全选框要进行隐藏,复选框也变成单选框,这里是通过css样式进行调整的
-
// 隐藏表头全选复选框
-
//(主要目的就是隐藏全选复选框,亲测具体项目细节不同可能实现方式不同,如果不生效需要调整下)
-
/deep/ .el-table thead { // 第一种
-
.el-checkbox__input {
-
display: none ;
-
}
-
}
-
-
/deep/ .el-table__header-wrapper .el-checkbox { // 第二种
-
display: none ;
-
}
-
-
-
//表格复选改为单选
-
.singleTable {
-
/* 修改复选框样式 变成单选框样式 */
-
/deep/ .el-checkbox__inner {
-
border: 1px solid #dcdfe6;
-
border-radius: 100%;
-
width: 14px;
-
height: 14px;
-
position: relative;
-
cursor: pointer;
-
display: inline-block;
-
box-sizing: border-box;
-
&::after {
-
transform: translate(-50%, -50%) scale(1);
-
width: 3px;
-
height: 3px;
-
border-radius: 100%;
-
background-color: #fff;
-
content: "";
-
position: absolute;
-
left: 50%;
-
top: 50%;
-
transition: transform 0.15s ease-in;
-
}
-
}
-
}
勾选数据触发方法:
勾选复选框的select和整行操作的row-click可以共用同一个方法,但是要注意传参.select事件默认传参是(selection, row),而row-click触发事件的第一个默认传参是( row ),所以row-click时间在共用方法时要特殊传参(@row-click="handleSelectionChange('',$event)")
-
handleSelectionChange (selection, row) {
-
if (row.noChoose) return //不满足条件数据不可操作
-
this.$refs.tableRef.clearSelection()
-
// 这里因为需求做的是必选一个,如有其他需求可做调整
-
this.$refs.tableRef.toggleRowSelection(row, true)
-
this.selections = row
-
},
控制数据是否可勾选:
可以在selection中使用selectable参数的回调函数处理
-
checkboxSelect (row) {
-
//不符合条件的不允许勾选
-
return !row.isChoose
-
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhggbckc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01