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 數組中
},