场景

实现多选非常简单: 手动添加一个el-table-column，设type属性为selection即可。

多选效果

单选效果

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

实现多选

在el-table中添加一个el-table-column 设置类型为selection即可

        <el-table v-loading="loading" :data="dkszList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center"/><el-table-column label="工号" align="center" prop="gh"/></el-table>

并且通过

@selection-change="handleSelectionChange"

设置其所选项改变事件，在事件对应的方法handleSelectionChange中

      // 多选框选中数据handleSelectionChange(selection) {//获取所有选中项的gh(工号)属性的值this.ghs = selection.map(item => item.gh)//获取所有选中项数组的长度this.selectedNum = selection.length},

其中selection是作为选中项的一个数组，可以通过map方法来获取对应gh列即工号列的所有值

其中this.ghs 和 this.selectedNum 要提前声明

    data() {return {// 选中数组ghs: [],//选中的记录数量selectedNum:0,

效果

实现单选

        <el-tablev-loading="loading":data="kqryszList"@selection-change="handleSelectionChange"ref="tb"><el-table-column type="selection" width="55" align="center" /><el-table-column label="工号" align="center" prop="gh" /></el-table>

与实现多选类似，需要添加一列类型为selection。

除了设置其选项改变事件外，还需要设置其ref属性。

设置ref的目的是能在方法中通过

this.$refs.tb

获取这个table

在方法handleSelectionChange中

    // 单选框选中数据handleSelectionChange(selection) {this.checkedGh = selection[0].gh;if (selection.length > 1) {this.$refs.tb.clearSelection();this.$refs.tb.toggleRowSelection(selection.pop());}},

此方法的实现逻辑就是，通过设置的ref属性和 this.$refs.tb来获取这个table，

然后判断选择项的数组selection的长度大于1的话就清除数组并设置选择最后一次选中的项。

并且通过

 this.checkedGh = selection[0].gh;

获取选项行的gh属性的值。

其中checkedGh需要提前在

  data() {return {//选中的工号checkedGh: [],

声明。

效果

ElementUI中的el-table怎样实现多选与单选相关推荐

elementui中el-table实现翻页、全选
问题描述在最近的一个项目中,我需要实现表格的翻页,并且还要实现全选.多选功能众所周知,el-checkbox默认样式不好改,所以在这里我没有用elementui中的多选框,用的是<input ...
element-UI中手动调用table排序
<el-table:data="tableData"style="width: 100%"height="600"ref=" ...
Element-UI中关于table表格的那些骚操作
最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是 ...
elementui 表格英文加数字排序_解决vue elementUI中table里数字、字母、中文混合排序问题...
1.使用场景使用elementUI中的table时,给包含数字字母中文的名称等字段排序例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)-> ...
1.ElementUI中table的sortable使用
ElementUI中table的sortable使用 ElementUI-table 1.业务分析将相对应的字段进行升序或者降序,在后台管理系统中,后端返回的指定的页面的数据,所有后端将排序做好,前 ...
elementUI中table中自定义修改时间格式2020-10-26T10:00:00
问题描述: 前端使用el-table查询到后台的数据的某一列时间列默认是标准UTC格式,如果想按照自己想显示的格式获取年月日和时分秒进行显示怎么办 ? 方法一: elementUI中的table提供了 ...
ElementUI中为table增加小计/合计
ElementUI中只有为表格增加一个合计的功能,但是有些时候可能会遇到同时增加小计/合计的功能,可以利用slot='append'去实现多个合计功能. 文章地址: ElementUI中为table增 ...
解决Element-ui中Table表格里的show-overflow-tooltip不兼容safari浏览器问题。
在使用element-ui过程中,需求:"列表中,文本内容过多,以划入显示全部内容展示",查看UI库,el-table提供了show-overflow-tooltip属性,但是在测 ...
VUE ElementUI中table框设置文字超出隐藏及设置提示框样式
当表格中某单元格的文字内容过多时,table中的每行的行高不一致导致风格不统一,这时需要用到ElementUI中table自带的属性show-overflow-tooltip使其内容均在一行显示,超出 ...
(Table)操作：Element-ui 中 Table 表格的设置表头/去除下标线/设置行间距等属性的使用及 slot-scope=“scope“ 的使用案例
Ⅰ.Element-ui 提供的Table组件与想要目标情况的对比: 1.Element-ui 提供Table组件情况: 其一.Element-ui 自提供的Table代码情况为(示例的代码): // ...

ElementUI中的el-table怎样实现多选与单选

场景

实现

实现多选

效果

实现单选

效果

ElementUI中的el-table怎样实现多选与单选相关推荐

最新文章

热门文章