父页面调用子组件时,传入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的&lt;script&gt; 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` 变量的值即可。