element table复选框禁用

背景：有些需求，做修改和查看，查看的时候就禁用所有的checkbox,修改的时候就放开对checkbox的禁用

正常的复选表单

目标表单：通过显示和禁用按钮达到两种状态之间的切换，类比实际开发中遇到的需求

<el-button @click="operateType(2)">显示</el-button>
<el-button @click="operateType(3)">禁用</el-button>
operateType(type) {this.tableType = type;
}

首先，分析，分为两大步实现，把表头和表格分开实现

header,主要是:header-cell-class-name="cellClass"

<el-tableref="multipleTable":data="tableData2":header-cell-class-name="cellClass"
>
</el-table>cellClass(row) {if (this.tableType === 2 && row.columnIndex === 0) {return "ShowSelection";} else if (this.tableType === 3 && row.columnIndex === 0) {return "DisableSelection";}},.el-table /deep/ .DisableSelection > .cell {display: none;
}
.el-table /deep/ .ShowSelection > .cell {display: block;
}

body部分可直接参考官网：Element - The world's most popular Vue UI framework

<el-table-column type="selection" :selectable="selectableFunc" width="55"></el-table-column>selectableFunc() {return this.tableType === 2;
},

以上步骤就能实现两种状态之间的切换

element table复选框禁用相关推荐

element table 复选框是否选选中判断
参考:https://element.eleme.cn/#/zh-CN/component/table 操作过程:table中使用下拉修改数据,由于下拉以后数据在不保存的情况之下会保持缓存值,导致ta ...
ajax传递复选框的参数,ajax将table复选框的数组值传递到后台
//头工具栏事件 table.on('toolbar(gv_SalesOrderInfo)', function (obj) { debugger; var ItemId = []; var chec ...
ElementUi Table复选框回显
ElementUi Table复选框回显 UI代码: <el-table :data="acctSettleHangAccountList" style="widt ...
html表单复选框隐藏,ElementUI 表格部分复选框禁用或隐藏
背景我们在使用 element ui 的 Table 组件构建带复选框的表格时,我们希望根据条件禁用或者隐藏某行选择框.如下图所示: 解析通过查看 ElementUI 官方文档 selectabl ...
DevExpress XtraTreeList的复选框禁用
树的2个事件代码如下,通过节点的tag判断是否禁用节点前的复选框.树的节点加载时设置要禁用的节点tag为-1,不禁用的则设为相关的值 private void treeListPer_CustomDr ...
layui table 复选框跳页后再回来保持原来选中的状态
layui table默认跳页后不存在源页面选中的状态.如果要实现记录源页面的选中状态,需要定义一个全局变量来记录数据选中状态. 1.修改table.js ;layui.define(["l ...
vue elementui table 复选框
1.el-table 中加入事件@selection-change="handleSelectionChange" <el-table-column type=" ...
bootstrap table 复选框获取选中某几行的数据 + 可翻页
前期要点: 1.Set 集合的add,delete方法 2.bootstrap table 事件列表, 全选 :check-all.bs.table 取消全选: uncheck-all.bs ...
layui table 复选框数据_Python操作三大数据库 Mysql
MYSQL是目前应用最广泛.普及度最高的开源关系型数据库.体积小.速度快.总体拥有成本低,开源是使得它广为普及的主要原因. 今天将 Python 与 Mysql 的结合,两者进行交互,一起来学习吧! ...

element table复选框禁用

element table复选框禁用相关推荐

最新文章

热门文章