ElementUI表格多选数据处理

1.添加复选框

<el-table-column type="selection" :reserve-selection="true" ></el-table-column>

1.在el-table-column里面选择type为selection设置为复选框
2.(可选)如果要获取不同页的数据进行操作，利用reserve-selection，官方文档说明：

2.el-table属性设置

<el-tablestripe:data="taskTableList"ref="listRef"row-key="Id"
>

注意：这里需要绑定row-key

3.处理行数据，将id提取成一个数组

如果不对选择的数据进行处理
则this.$refs.listRef.selection即可使用，得到的信息如图：

由于项目需要将id提取出来，利用forEach得到数组中每个对象里的id

taskExport () {let Ids = []this.$refs.listRef.selection.forEach(e => {Ids.push(e.Id)})console.log(Ids)},

打印如下：

ElementUI表格多选数据处理相关推荐

elementUI 表格多选框this.$refs.xxx.toggleRowSelection无效
在elementUI官方实例中,multipleSelection代表选中的值,toggleRowSelection(row,selection)方法用于原先已选的值传入进行勾选,row传递被勾选行的 ...
html+单选+回显,VUE+elementUI表格多选框实现单选以及数据回显时toggleRowSelection失效问题...
一.多选框单选 > @select-all="onSelectAll" 全选是触发的事件 @selection-change="selectItem" 单 ...
element-ui 表格多选框按条件禁用部分选项
HTML 在 el-table-column type 类型为 selection 组件中,添加 :selectable='方法名' <el-table :data="tableDat ...
elementui 表格中单元格自定义功能
客户相让表格的可操作空间变得更大,比如说可以修改表格内容(双击之后出现input),点击某一单元格可以弹窗等等,让一切可以需要的功能再单击单元格中实现. 其实在elementui的官方文档中也可以找到 ...
element-ui 可复选树型表格
效果思路自定义模板当点击某个行复选框时,其所有后代复选框都要同步状态,且其直系父辈状态需要根据所点击复选框的状态来修正点击全选复选框时,批量同步所有行内复选框状态代码非封装组件,按需自行改 ...
elementui[el-table]表格全选操作以及翻页选中取消相关效果
elementui的表格默认是没有所有数据选中的操作的,仅仅只是选中当前页的10条或者20条数据,因此我们需要自己手动加入一个全选操作的按钮.以此来将数据全部选中保存. 总体来看无非就是几步操作而已. ...
ElementUI自定义表格多选表头
ElementUI自定义表格多选表头首先开局一张图需求说明,如图所示,表格中的每一行是一个复选框,点击表头的复选框,需要吧每一行中的复选框选中,当行中的复选框全部选中时自动勾选上表头的. 在UI框 ...
elementUI表格组件：自定义列模板（完整案例）
elementUI表格组件:自定义列模板(含效果图) 所谓的自定义列模板,你也可以理解为自定义td的格式. 官方文档地址 :查看地址页面· 效果图 · 对比 : 代码块1 · 对比:<temp ...
vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇
elementUI表格组件,response.data.newsLists列表如何循环出来?如何点击传参numId,并进入对应的内容页? 本文意图: 使用官方table组件:实现API调用:文章遍历. ...

ElementUI表格多选数据处理

1.添加复选框

2.el-table属性设置

3.处理行数据，将id提取成一个数组

ElementUI表格多选数据处理相关推荐

最新文章

热门文章