Vue 3.X 表格组件el-table初始化时保持多选框的选中_vue3 el-table togglerowselection_AimerRhythm的博客

相关文章推荐

重感情的丝瓜 · RxJava2.x 萌新之路 ...· 1 年前 ·

坐怀不乱的啄木鸟 · Python连接Impala实现步骤解析_p ...· 1 年前 ·

鬼畜的太阳 · if同时满足两个条件怎么写 python-掘金· 1 年前 ·

大气的电池 · 崔巍总领事在《自由报》发表署名文章· 1 年前 ·

健身的抽屉 · rust struct 构造函数-掘金· 1 年前 ·

父页面调用子组件时，传入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` 变量的值即可。