</el-form-item>
<el-form-item label="加入时间">
<span>{{ props.row.join_time | formatDate}}</span>
</el-form-item>
<el-form-item label="离开时间">
<span>{{ props.row.leave_time }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column
label="公司 ID"
prop="com_id">
</el-table-column>
<el-table-column
label="公司名称"
prop="com_name">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
这边因为要涉及到我项目最终实现的效果，所以我这里就直接把我的整个table都复制上来了，这边的重点主要是table的各个属性，也就是这个代码段的开头，我们在这里涉及到了一个新的监听事件
@current-change="toggleRowExpansion"，这个事件表示切换行的时候会有一个触发的事件发生，我们在获取了行id，展开行id之后，还要去data里面定义我们所要用到的数据框架。
data() {
return {
compony:[],
// 获取row的key值
getRowKeys(row) {
return row.id;
},
form: {},
// 要展开的行，数值的元素是row的key值
expands: [],
}
},这边我就展示所需要用到的数据布置了，通过getRowKeys方法获取到row的行id值，定义一个expands展开行的数组，最后是业务逻辑代码
data() {
return {
compony:[],
// 获取row的key值
getRowKeys(row) {
return row.id;
},
form: {},
// 要展开的行，数值的元素是row的key值
expands: [],
}
},因为我们现在只要求展开一行，所以每次把需要展开行的id储存进数组时要先清空一次数组，然后在push进去，最终实现效果图
