element表格选中项回显

element表格选中项回显

需要利用<el-table>下的row-key属性以及<el-table-column>标签下的:reserve-selection属性。

<el-table
     ref="tableData"
     class="tableData"
     :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
     style="width: 100%; table-layout:fixed"
     :max-height="tableHeight"
     stripe
     size="medium"
     border
     row-key="id"   // 这个属性  id表示每一行的唯一标识，用于返回id
     @selection-change="handleSelectionChange"
     v-loading="tableLoading"
   >

<el-table-column
  align="center"
  fixed
  type="selection"   // 这个属性表示当前列为复选框列
  width="60"
  :reserve-selection="true"    // 这个必须带  表示是否显示勾选项
></el-table-column>

data() {
  return {
    multipleSelection: [], // 存放表格选中项信息
  };
},

// 获取表格选中项信息
handleSelectionChange(val) {
  this.multipleSelection = val;   // 把当前勾选项存放在data属性中的 multipleSelection 数组中
},