Element UI el-table 默认选中单选行设置方法
要在 el-table 中设置默认选中单选项,可以使用以下方法:
- 在数据源中设置默认选中项的属性(例如:selected: true)。
- 在 el-table 中使用 :default-sort 属性来设置默认排序规则,以确保默认选中项被正确排序。
- 在 el-table 中使用 :current-row-key 属性来设置当前选中行的 key 值,以确保默认选中项被正确标记。
示例代码:
<el-table
:data="tableData"
:default-sort="{prop: 'id', order: 'ascending'}"
:current-row-key="selectedItem.id"
@current-change="handleCurrentRowChange"
>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="gender" label="Gender"></el-table-column>
</el-table>
在上面的示例中,我们使用了 :default-sort 属性来设置默认排序规则为 id 升序,并使用 :current-row-key 属性来设置当前选中行的 key 值为 selectedItem.id。在表格数据中,我们可以设置默认选中项的 selected 属性为 true。最后,我们还需要在 handleCurrentRowChange 方法中更新 selectedItem 值以确保选中项被正确更新。
原文地址: https://www.cveoy.top/t/topic/otiM 著作权归作者所有。请勿转载和采集!