```
<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属性--绑定数据 -->
<!-- border：竖向边框 -->
<!-- stripe：斑马线效果，即隔行换色效果 -->
<!-- height：固定表头，即固定表格table的高度，超出显示滚动条，在内部滚动 -->
<!-- @selection-change="handleSelectionChange" => 获取到当前选中的行 -->
<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:设置表格头 -->
<!-- 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 获取当前行的数据 -->
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "Table",
methods: {
handleSelectionChange(value) {
console.log(value); //默认会返回，所有选中的行；获取到当前选中的行
this.selections = value; //为value赋值
},
handleSelection() {
console.log(this.selections); //通过selections事件，不断的去记录当前选中的数据
},
handleEiit(row) {
console.log(row);
},
handleDelete(row) {
console.log(row);
},
},
data() {
return {
selections: [], //默认没有选择，保存选中数据
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>
```
