```
<template>
??<div>
????<el-row?:gutter="10">
??????<el-col?:span="6">
????????<el-button?type="primary"?size="mini"?@click="handleSelection"
??????????>獲取選中的行</el-button
????????>
??????</el-col>
????</el-row>
????<!--?el-row?:gutter：分欄間隔?-->
????<!--?el-col?:offset：分欄偏移?-->
????<!--?el-row?type="flex"對齊方式?-->
????<el-table
??????:data="tableData"
??????border
??????stripe
??????height="300px"
??????style="width:?100%"
??????@selection-change="handleSelectionChange"
????>
??????<!--?通過:data屬性--綁定數(shù)據(jù)?-->
??????<!--?border：豎向邊框?-->
??????<!--?stripe：斑馬線效果，即隔行換色效果?-->
??????<!--?height：固定表頭，即固定表格table的高度，超出顯示滾動條，在內(nèi)部滾動?-->
??????<!--?@selection-change="handleSelectionChange"?=>?獲取到當(dāng)前選中的行?-->
??????<el-table-column
????????header-align="center"
????????align="center"
????????type="selection"
??????></el-table-column>
??????<el-table-column
????????header-align="center"
????????align="center"
????????label="序號"
????????type="index"
????????width="100"
??????>
??????</el-table-column>
??????<el-table-column?prop="date"?label="日期"?width="180"></el-table-column>
??????<!--?fixed="left"?-->
??????<!--?fixed：固定列，需要固定誰就給誰添加，left/right?-->
??????<!--?prop：用來決定展示哪一個屬性的值；label:設(shè)置表格頭?-->
??????<!--?header-align：表頭顯示方式?-->
??????<!--?align：首列顯示方式?-->
??????<!--?type：序列號index/多選框selection?-->
??????<el-table-column?label="姓名"?prop="name"></el-table-column>
??????<el-table-column?label="地址"?prop="address"></el-table-column>
??????<el-table-column?header-align="center"?align="center"?label="操作">
????????<template?slot-scope="scope">
??????????<el-button
????????????type="primary"
????????????icon="el-icon-edit"
????????????size="mini"
????????????@click="handleEiit(scope.row)"
????????????>編輯</el-button
??????????>
??????????<el-button
????????????type="danger"
????????????icon="el-icon-delete"
????????????size="mini"
????????????@click="handleDelete(scope.row)"
????????????>刪除</el-button
??????????>
??????????<!--?scope.row?獲取當(dāng)前行的數(shù)據(jù)?-->
????????</template>
??????</el-table-column>
????</el-table>
??</div>
</template>
<script>
export?default?{
??name:?"Table",
??methods:?{
????handleSelectionChange(value)?{
??????console.log(value);?//默認會返回，所有選中的行；獲取到當(dāng)前選中的行
??????this.selections?=?value;?//為value賦值
????},
????handleSelection()?{
??????console.log(this.selections);?//通過selections事件，不斷的去記錄當(dāng)前選中的數(shù)據(jù)
????},
????handleEiit(row)?{
??????console.log(row);
????},
????handleDelete(row)?{
??????console.log(row);
????},
??},
??data()?{
????return?{
??????selections:?[],?//默認沒有選擇，保存選中數(shù)據(jù)
??????tableData:?[
????????{?date:?"2020-01-01",?name:?"小不點兒",?address:?"河北省保定市"?},
????????{?date:?"2020-02-02",?name:?"張三",?address:?"河北省保定市"?},
????????{?date:?"2020-03-03",?name:?"王五",?address:?"河北省保定市"?},
????????{?date:?"2020-04-01",?name:?"李四",?address:?"河北省保定市"?},
????????{?date:?"2020-05-01",?name:?"趙晴",?address:?"河北省保定市"?},
????????{?date:?"2020-06-01",?name:?"馮峰",?address:?"河北省保定市"?},
????????{?date:?"2020-07-01",?name:?"小一",?address:?"河北省保定市"?},
????????{?date:?"2020-08-01",?name:?"大張",?address:?"河北省保定市"?},
????????{?date:?"2020-09-01",?name:?"吳助",?address:?"河北省保定市"?},
??????],
????};
??},
};
</script>
```
