vue + element 表格多选框回显

刺骨的言语ヽ痛彻心扉 2023-05-22 04:41 15阅读 0赞

项目开发使用的elemnetUI的table组件，牵扯到一个多选框的回显机制，这里记录一下。

那么想要实现table的多选框回显，前提得有多选框，而实现回显也主要有依赖多选框自带的几个事件，当表格存在多选框时这几个事件便可以生效：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]

<el-table
              row-key="id"
              :data="tableData"
              v-loading.body="tableLoading"
              :header-cell-style="headerClass"
              :max-height="tableHeight"
              :height="tableHeight"
              tooltip-effect="light"
              element-loading-text="加载中"
              style="width: 100%" ref="myTable"
              @selection-change="mySelectionChange"
              stripe label-class-name="el-table-th">
              <el-table-column type="selection" :reserve-selection="true" width="40"></el-table-column>
              <el-table-column label="序号" min-width="10" type="index" align="center">
                <template slot-scope="scope">
                  { { (tablePage.pageNum - 1)*tablePage.pageSize + scope.$index + 1}}
                </template>
              </el-table-column>
              <el-table-column label="书名" min-width="80" prop="type" align="center">
                <template slot-scope="scope">
                  { { scope.row.title}}
                </template>
              </el-table-column>
              <el-table-column label="书籍类型" min-width="80" prop="type" align="center">
                <template slot-scope="scope">
                  { { scope.row.typeName}}
                </template>
              </el-table-column>
              <el-table-column label="书籍状态" min-width="70" prop="status" align="center">
                <template slot-scope="scope">
                  { { scope.rowstatus=='1'?'开放':'关闭'}}
                </template>
              </el-table-column>
    
            </el-table>

都是elementUI自带的事件，详细了解可以去看官网，

elementUI table的多选框是双向切换状态，即点击勾选，再点击取消勾选，所以要实现回显功能，首先应该判断多选框当前的状态，默认的select事件会携带两个参数，selection即当前勾选的所有数据的集合（数组），row即当前行的数据，重要代码如下：

//更改选择的书籍信息
          mySelectionChange(val,index) { 
            this.mySelect=val;
          },

回显操作（让某一行回显）

this.$refs.trainingMaterialTable.toggleRowSelection(row, true) // 回显

清除整个表格的回显

this.$refs.myTable.clearSelection();  //清除回显

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]: /images/20230521/0699d5dd6c234aa7a4a6d21c35320319.png