父页面调用子组件时,传入el-table中应当选中的值列表,但在使用toggleRowSelection时触发两次selection-change事件,无法正确显示。
可以看到打印了两次selection。
解决方法:el-table标签需要包含row-key、reserve-selection属性
<el-table @row-click="clickRow"
ref="refTable"
:reserve-selection="true"
:row-key="getRowKey"
:data="userList"
@selection-change="handleSelectionChange" height="260px"
<el-table-column type="selection" width="55"></el-table-column>
</el-table>
在script里使用nextTick
props.ids.forEach(id => {
nextTick(() => {
userList.value.forEach(row => {
if (row.userName == id.userName) {
proxy.$refs["refTable"].toggleRowSelection(row, true);
官网尽管提供了toggleRowSelection方法,但没有提供demo实例。
通过了解,结合vue的特殊属性ref引用到Dom元素上,再执行dom上的toggleRowSelection方法。
以下通过三种不同的数据来源实现table默认勾选对应的列:
1、固定写在data数据里:
注意el-table上有一个ref=”table”的属性
<el-table :data=tableData3 border ref=table style=width: 100% @selection-change=handleSele
Error: row is required when get row identity
问题:一直以为是el-table的表数据传输有问题,然后做了一堆排查后发现,其实不然
// 单击或者勾选的数据
selectPage(e) {
if(e.constructor === Array){
this.$refs.maintable.$refs.multipleTable.toggleRowSelec
1、ElementUi文档已经说了,如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。
<el-table-column prop=nickname label=
截一张官方文档图,图示最后一排就是禁用状态
点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: '
<title>Title</title>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style media="screen" type="text/css">
#appLoading {
width: 100%;
一.toggleRowSelection查看官网toggleRowSelection(row, selected)接受两个参数,row传递被勾选行的数据,selected设置是否选中注意:调用toggleRowSelection这个方法 需要获取真实dom 所以需要注册 ref 来引用它 二.操作(一).默认选中1.当数据源固定在table的<script>
export defaul...
要让 el-table 初始高亮某一行,可以通过设置 `highlight-current-row` 属性来实现。具体方法如下:
1. 在 el-table 组件上添加 `highlight-current-row` 属性:
```html
<el-table :data="tableData" highlight-current-row>
<!-- 表格列的定义 -->
</el-table>
2. 在 el-table 组件上添加 `current-row-key` 属性,并将其绑定到一个变量上,该变量的值为要高亮的行的唯一标识符,比如行的 ID:
```html
<el-table :data="tableData" highlight-current-row :current-row-key="currentRowId">
<!-- 表格列的定义 -->
</el-table>
3. 在 Vue 实例中定义 `currentRowId` 变量,并将其初始化为要高亮的行的唯一标识符:
```js
export default {
data() {
return {
currentRowId: '1' // 要高亮的行的唯一标识符
这样,当 el-table 组件初始化时,就会自动高亮该行。当然,如果需要动态改变高亮的行,只需要在 Vue 实例中改变 `currentRowId` 变量的值即可。