element-ui 表格翻頁多選後仍然記憶所選項，數據回顯

reserve-selection與row-key結合

 

 

<el-table :data="pageData" ref="goodsTable" size="small" v-loading="loading" height="520" @selection-change="handleSelectionChange" :row-key="getRowKeys">
    <el-table-column type="selection" :reserve-selection="true" width="50" prop="id">
    </el-table-column>
    <el-table-column label="編號" prop="goodsCode" width="130">
    </el-table-column>
    <el-table-column label="品名" prop="tradeName" show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="規格" prop="specification" width="150" show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="最小包裝" prop="minPack" width="150" show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="狀態" prop="saleState" width="100">
        <template scope="scope">
            <el-tag>{{scope.row.saleState | statusFilter}}</el-tag>
        </template>
    </el-table-column>
    <el-table-column label="生產廠家" prop="manufacturer" show-overflow-tooltip>
    </el-table-column>
</el-table>

data() {
        pageData: [],
        loading: false,
        // 獲取row的key值
        getRowKeys(row) {
            return row.id;
        },
        selectedData: []
    },

 

推薦網址：https://segmentfault.com/q/1010000009772656

　　　　http://element.eleme.io/#/zh-CN/component/table#table-column-attributes