vue elementUI实现el-table点击行单选， 点击行多选，点击复选框单选效果

以下分别介绍这四种效果的实现方式，非常简单！

首先橘袜：table绑定点击行事件 @row-click="rowClick"

绑定复选框勾选事件 @select="handleSelectionChange"

1、点击行多选

2、点岩册击行单选

3、table复选框单选 点击复选框单选圆枣激效果记录选中数据

4、table复选框多选 点击复选框多选效果 记录选中数据

如果还涉及到复选框默认勾选，默认禁用等效果。

可查看我的上篇笔记~

一：首先 创建 el-table

<el-table

ref="BaseTable"//设置 ref属性

:highlight-current-row="true"//高光选中行

:current-row-key="NowRowIndex"//行号

:row-class-name="tableRowClassName"//装段洞载 EL-TABLE前执行的 方握州枯法 会遍历每一行 每一个单元格

@row-click="BaseRowClick">//添加行点击事件

二：添加 分页 组件 细节在于 :current-page.sync="currentPage" 不写这句 无效

<el-pagination

:current-page.sync="currentPage"

layout="prev, pager, next"

@current-change="current_change"//选中页 改变事件

:total="total"//总行数

:page-count="AllPageCount"//总页数

:page-size="pagesize"//每页显示的行数

background >

</el-pagination>

三：current_change（）选中页 改变事件 记录当前迹辩选中的行号

current_change:function(currentPage){

this.currentPage = currentPage

this.LastPageCount = currentPage

this.SetCreenRow(this.BaseInfoList[this.SelectDataIndex])

}

四：tableRowClassName（）方法，给EL-TABLE设置行号

tableRowClassName ({row, rowIndex}) {

row.row_index = rowIndex

}

五：行点击事件

BaseRowClick(row, column, event){

this.NowRowIndex = row.row_index//记录点击行的行号

this.NowSelectNum = row.SuppliesNum//记录行数据中的一个唯一键 以便 绑定 记录的选中行

//记录点击行时的 纵轴滚动条位置

let vmEl = this. el

const scrollParent = vmEl.querySelector('.el-table__body-wrapper')

this.Nowscroll = scrollParent.scrollTop

}

六：刷新列表的方法 内 绑定 之前 选中的 页码 行 及 滚动条位置

//选中 之前记录的 分页页码

this.current_change(this.LastPageCount)

//设置 滚动条到之前记录的位置 细节在于必须加 setTimeout 否则无效

setTimeout(() =>{

this.$refs.BaseTable.bodyWrapper.scrollTop = this.Nowscroll

}, 13)

el-table双击事件怎么传索引

1、首先在excel表格中点击表格下方“+”符号新建一个工作表。

2、双击工作表的名称位置，即可更改工作表的名称为“索引目录”。3、然后在索性目录页面的单元格中设计好需要的格式及样式。4、然后在需要统计索性的位置输入“=”符号。5、并切换到表格1的位置，点击需要取数的合计数位置点击回车，即可将表格亩察1的数据取出显示到索引页单元格中。6、用同样的方式切换到表格2中选中需要取数的单元格位如耐乱置。7、点击回车按键，即可在索引页中生成渣档需要的数据内容。

---