vue + element 表格多选框回显

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

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

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

  1. <el-table
  2.           row-key="id"
  3.           :data="tableData"
  4.           v-loading.body="tableLoading"
  5.           :header-cell-style="headerClass"
  6.           :max-height="tableHeight"
  7.           :height="tableHeight"
  8.           tooltip-effect="light"
  9.           element-loading-text="加载中"
  10.           style="width: 100%" ref="myTable"
  11.           @selection-change="mySelectionChange"
  12.           stripe label-class-name="el-table-th">
  13.           <el-table-column type="selection" :reserve-selection="true" width="40"></el-table-column>
  14.           <el-table-column label="序号" min-width="10" type="index" align="center">
  15.             <template slot-scope="scope">
  16.               { { (tablePage.pageNum - 1)*tablePage.pageSize + scope.$index + 1}}
  17.             </template>
  18.           </el-table-column>
  19.           <el-table-column label="书名" min-width="80" prop="type" align="center">
  20.             <template slot-scope="scope">
  21.               { { scope.row.title}}
  22.             </template>
  23.           </el-table-column>
  24.           <el-table-column label="书籍类型" min-width="80" prop="type" align="center">
  25.             <template slot-scope="scope">
  26.               { { scope.row.typeName}}
  27.             </template>
  28.           </el-table-column>
  29.           <el-table-column label="书籍状态" min-width="70" prop="status" align="center">
  30.             <template slot-scope="scope">
  31.               { { scope.rowstatus=='1'?'开放':'关闭'}}
  32.             </template>
  33.           </el-table-column>
  35.         </el-table>

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

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

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

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

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

清除整个表格的回显

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

发表评论

表情：
评论列表 （有 0 条评论，89人围观）

还没有评论，来说两句吧...

相关阅读