el-table中expand类型

根据需求，针对页面展示时，考虑到的一种table展示方式，存在的样式处理

1、html部分
<el-table v-loading="errorloading" ref="errorDetail" :data="errorData" border style="width: 100%; height: 100%">
    // 此处，width=1；也有利于样式的处理
    <el-table-column type="expand" width="1">
        <template slot-scope="scope">
            <el-form inline class="demo-table-expand">
                <el-form-item label="时 间：">
                    <span>{{ scope.row.clientTimestamp }}</span>
                </el-form-item>
                <el-form-item label="任务ID：">
                    <span>{{ scope.row.taskId }}</span>
                </el-form-item>
                <el-form-item label="课程名称：">
                    <span>{{ scope.row.courseName }}</span>
                </el-form-item>
            </el-form>
        </template>
   </el-table-column>
   <el-table-column type="index" label="序号"></el-table-column>
   <el-table-column prop="taskId" label="任务ID" show-overflow-tooltip></el-table-column>
   <el-table-column prop="courseName" align="center" label="课程名称"></el-table-column>
   <el-table-column label="操作">
       <template slot-scope="scope">
         <el-button type="text" @click="toogleExpand(scope.row, scope.$index)">查看更多</el-button>
       </template>
   </el-table-column>
</el-table>

2、JS部分
toogleExpand (row, key) { // 处理展开更多，点击处理
    let $table = this.$refs.errorDetail;
    this.errorData.map((item, index) => {
        if(key != index) {
            $table.toggleRowExpansion(item, false)
        }
    })
    $table.toggleRowExpansion(row)
}

3、css样式部分
/deep/ .el-table__expand-icon {
      display: none;
} // 将箭头隐藏掉