在el-table 中使用 el-checkbox-group 实现回显功能,你需要确保 el-checkbox-group 的v-model 绑定的数据与 el-checkbox 的label 属性值相匹配。以下是实现这一功能的步骤和代码示例: 1. 理解 el-table 和el-checkbox-group 的基本用法 el-table 是Element UI 提供的表格组件,用于展示结构化数据。 el-checkbox...
<el-dialog title="新增/编辑" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" :destroy-on-close="false" :close-on-click-modal="false"> <el-table :data="companyData" v-loading="companyLoading" height="300" ref="multipleTable" @select="handleSelectionChange" @select...
2.多选框回显方法 rowMultipleChecked(data){if(data.length){this.$nextTick(function(){data.forEach(item=>{// 如果数据中的bindingStatus === true的话 让这一列选中if(item.bindingStatus===true){// multipleTable 是这个表格的ref属性 true为选中状态this.$refs.multipleTable.toggleRowSelection(item,t...
在获取productList后循环判断是否与echoList匹配,如果匹配则使用this.$refs.multipleTable.toggleRowSelection(item, true)方式勾选数据,当切换分页的时候还会继续执行以上的判断。回显数据就写完了。 单项勾选以及取消勾选,全选以及取消全选: 单项勾选操作方法:handleSelectionChange,当点击checkbox时,循环判断echoList中是...
然后把checkBoxCheckedList v-model到el-checkbox-group上就回显成功了 image.png this.customerMeasureInfo.energyTypeList就是上面演示的arrList data{ return{ form:{ type:[], xxx:xxx, ... } checkBoxCheckedList:[],//回显checkBox的值 nenYuanOptionL:[],//接口字典 dictLabel dictCode ↓↓↓ //...
el-checkbox-group需要的参数是数组 但是后端返回的是数组包对象的数据 我们点击后checkBox后只会传中文到v-model的数组里面 后端根据id查询返回的数据（查询出来的对象中的一个数组 然后数组里面又包了对象）arrList 然后把checkBoxCheckedList v-model到el-checkbox-group上就回显成功了 this.customer...
el-checkbox-group 数据回显 v-model绑定的值需与:label中的值类型相等才能正常回显 若后端返回的数据为字符串,可使用split(‘,’)方法将字符串转换为数组。
2.1 设置table标签 下面加粗字体是实现多页多选 翻页回显的必要设置,下面依次说明一下 <el-table size="small" :data="listData"ref="multipleTable" row-key="getRowKeys" @select="handleCheckBox" @select-all="handleSelectAll"highlight-current-row v-loading="loading" border element-loading-text="拼命...
<input type="checkbox" /> (二)点击当前行改变复选框的选中状态 第一部分:HTML <tablestyle="width: 100%; border-collapse: collapse;"cellspacing="0"cellpadding="1"border="0"width="100%"> <tbody> <trclass="TableHeader"align="center"> ...