toggleRowSelection 默认勾选表格 Element

2,789 阅读1分钟

在页面初始化加载时将表格中某行默认选中

table表格渲染

<el-table
          :data="tableData"
          :span-method="objectSpanMethod"
          border
          style="width: 100%; 
          margin-top: 20px"
          row-key="tunnleId" 
          ref="multipleTable"
          @selection-change="handleSelectionChange"
        >
        <!--  row-key="id"   // 这个属性  id表示每一行的唯一标识,用于返回id -->
         

          <!-- <el-table-column
            prop="tunnelId"
            label="通道ID"
            width="80"
          >
          </el-table-column> -->
          <el-table-column
            prop="tunnelName"
            label="通道名称"
          >
          </el-table-column>
           <el-table-column
            type="selection"
            width="58"
            
            :reserve-selection="true"    
          >
           <!-- :reserve-selection="true"这个必须带  表示是否显示勾选项 -->
          </el-table-column>
        </el-table>

data

data(){
return {
      tableData: [],
      multipleSelection: [], // 存放表格选中项信息
    };
}

注意:
1、注意el-table上有一个ref="multipleTable"的属性
2toggleRowSelection(row, selected)接受两个参数,row传递被勾选行的数据,selected设置是否选中
使用watch监听tableData数据
```js
 watch:{
    tableData() {  //默认勾选上所有的选项
        this.$nextTick( ()=> {
          for (const item of this.tableData) {
            this.$refs.multipleTable.toggleRowSelection(item,true);
          }
        })
    }
  },

至此,大功告成