element-ui table多选CheckBox参数解析

element-UI里的table表格与多选框CheckBox的组合很常用,官网也给了很多参数,自己总结了一下,方便日后使用

1、简易用法,没有附加的功能

要在表格里使用CheckBox很简单,只需设置type就可以

<!-- 在table中添加selection-change的处理函数,回调函数可以拿到选中的数组 -->
<el-table:data="tableData2"borderstyle="width: 100%"ref="checkTable"@selection-change="handleSelectionChange"><!-- 只需在表格里多加一列.设置type="selection"就可以 --><el-table-columntype="selection"width="55"></el-table-column>
  ...
</el-table>// method
handleSelectionChange (val) {console.log(val)
}

2、切换选中的表格,默认选中表格

使用表格的toggleRowSelection可以切换表格的选中状态,也可以设置表格的默认选中行

<!-- 在table中设置一个ref,就可以使用表格的方法了 -->
<el-table:data="tableData2"borderstyle="width: 100%"ref="checkTable"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column>
  ...
</el-table>// method
// 处理表格数据,已还款的自动选上
  handleCheckData () {let table = this.tableData2 // 从后台获取到的数据table.forEach(item => {if (item.status === '已还款') {// toggleRowSelection可以切换表格行的选中状态,接收两个参数第一个是要切换的行,这里需要的对象格式,// 第二个参数是设置选中还是不选中,不传的话会取与原来相反的选择状态// 方法调用要等元素挂载才后才能执行,这里加一个判断,这个方法要放在数据获取后this.$refs.checkTable && this.$refs.checkTable.toggleRowSelection(item, true)}})}

3、设置表格行为不可选

通过selectable参数可以手动设置某些表格行未不可选择

<el-table:data="tableData2"borderstyle="width: 100%"ref="checkTable"@selection-change="handleSelectionChange"><!-- 在type="selection的列里添加selectable参数,通过函数返回true或false可以设置是否可选" --><el-table-columntype="selection":selectable="handleDisable"width="55"></el-table-column>
  ...
</el-table>// method
// 处理表格数据,未还款的默认不能勾选
// 有两个参数返回,表格的每一行对象和当前索引
handleDisable(row, index) {// 函数需要一个返回值,true为可选,false为不可选择if (row.status === '未还款') {return false} else {return true}
}

4、保存数据更新前选中的数据

通过reserve-selection和row-key搭配使用,可以设置保留数据更新前的选中值(分页刷新数据等)

<!-- 在table里设置row-key参数 -->
<el-table:data="tableData2"borderstyle="width: 100%"ref="checkTable":row-key="handleReserve"@selection-change="handleSelectionChange"><!-- 在type="selection的列里添加reserve-selection参数,true为保留数据,默认为false不保留 --><el-table-columntype="selection"reserve-selectionwidth="55"></el-table-column>...
</el-table>// method
// 表格数据处理,保存上一页选中的数据
// 返回的参数是每一行的值,需要指定表格数据的唯一值,一般是id
handleReserve (row) {return row.id
}

5、其他的一些方法

// 清除选中的数据

this.$refs.checkTable.clearSelection()

// 切换所有行的选中状态

this.$refs.checkTable.toggleAllSelection()

转载于:https://www.cnblogs.com/steamed-twisted-roll/p/10451549.html

element-ui table多选CheckBox参数解析相关推荐

element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
element ui table组件筛选数据
需求:element ui table组件筛选全部数据 element ui 文档注意: 1. @filter-change 要写在table根元素,也就是<el-table @filter- ...
element ui table show-overflow-tooltip自定义样式
element ui table show-overflow-tooltip自定义样式在使用element ui table 组件时,表格td内容太多可设置show-overflow-tooltip ...
Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
element ui table封装组件，render 函数动态事件设置
接着上一篇讲的,封装element ui table, 支持自定义列的展示和按照指定顺序展示自定义列需要在引用页面重新写一下,这样就可以定义化了,多数用于一些转换,或者操作列场景下,自行考虑即可,我 ...
如何设置element ui table的show-overflow-tooltip属性以及宽度
如何设置element ui table的show-overflow-tooltip属性以及宽度
element ui table组件扩展关于列表编辑按钮的位置放置
最近在用vue做项目,主要是用的element ui的组件,在用的过程中发现有部分组件需要扩展,改源码太折腾,成本高,就想着如何节省成本来实现这些需求,由于项目时间紧张,有些实现来也没来得及记录一下, ...
element ui table实现考勤排班表
1.项目需求 1.1需求制作如下的考勤排班表,可以显示每个岗位每一天的考勤排班情况,并且可以下拉选择人员排班人员更改. 1.2 难点分析在表格中嵌入下拉选择功能. 需要动态显示每个月的排班情况,因 ...

element-ui table多选CheckBox参数解析

element-ui table多选CheckBox参数解析相关推荐

最新文章

热门文章