前言 vue + element ui 已經(jīng)成很多后臺(tái)管理的選擇框架
問(wèn)題：
- 后臺(tái)管理系統(tǒng)需要很多table 的展示，一般都還是做分頁(yè)效果的展示
- 導(dǎo)出功能選擇項(xiàng)，以及跨頁(yè)面進(jìn)行選擇就是問(wèn)題？
解決辦法：row-key
效果圖
第一步：el-table綁定
row-key 和 selection-change
<el-table
:row-key="getRowKeys" //methods 中定義的function
:data="tableData"
@selection-change="getSelectionChange"
>
或者
<el-table
row-key="id"
:data="tableData"
@selection-change="getSelectionChange"
>
解釋： row-key 支持多種方式，支持多層訪問(wèn)：user.info.id，但不支持 user.info[0].id，此種情況請(qǐng)使用 Function。
官網(wǎng)方法
2.將selection列設(shè)置reserve-selection=true
<el-table-column type="selection" :reserve-selection="true" width="55">
</el-table-column>
3. methods 中定義方法`
getRowKeys(row) {
return row.id;
},
getSelectionChange(val) {
console.log(val, "====getSelectionChange");
},
我還有更加繁瑣的方法，你要看嗎？哈哈！ps：因?yàn)橐郧安恢?，所以一直都用繁瑣的方法?/em>
