table固定首列

最近页面新需求：
table列字段较多，保证第一列（类似员工姓名等重要信息）固定展示，滚动横向滚动条其他字段滚动展示。
避免展示信息较多时，需要点击“详情”查看，更直观展示所有信息。

解决：
给各个字段添加固定宽度，出现横向滚动条；
给需要固定展示的字段添加fixed属性，使列固定展示。
相关代码：

       <el-table
            :data="list"
                    border
                    stripe
                    highlight-current-row
                    align="center"
                    @selection-change="handleSelectionChange"
                    v-loading="listLoading"
                    :header-cell-style="tableHeaderStyle"
                  >
                    <el-table-column
                    fixed
                      type="selection"
                      min-width="5%"
                      align="center"
                      width="60"
                    />
                    <el-table-column 
                      fixed
                      prop="employeeNo"
                      label="员工编号"
                      min-width="10%"
                      align="center"
                      width="120"
                    />
                    <el-table-column fixed
                      prop="name"
                      label="员工名称"
                      min-width="10%"
                      align="center"
                      width="150"
                    />
                    <el-table-column
                      prop="sexName"
                      label="性别"
                      min-width="7%"
                      align="center"
                      width="80"
                    />
                    <el-table-column
                      prop="orgName"
                      label="组织机构"
                      min-width="15%"
                      align="center"
                      width="150"
                    />
                    <el-table-column
                      prop="mobile"
                      label="手机号"
                      min-width="15%"
                      align="center"
                      width="120"
                    />
                    <el-table-column
                      prop="nation"
                      label="民族"
                      min-width="15%"
                      align="center"
                      width="80"
                    />
                    <el-table-column
                      prop="address"
                      label="地址"
                      min-width="15%"
                      align="center"
                      width="180"
                    />
                    <el-table-column
                        prop="college"
                        label="学校"
                        min-width="15%"
                        align="center"
                        width="150"
                      />
                    <el-table-column
                      prop="mailbox"
                      label="邮箱"
                      min-width="15%"
                      align="center"
                      width="180"
                    />
                    <el-table-column
                      label="操作"
                      min-width="15%"
                      align="center"
                      width="200"
                    >
                      <template slot-scope="scope">
                        <el-button icon="el-icon-view"   v-if="permissions.isView"   type="text" size="small" @click="handleShow(scope.row)">查看</el-button>
                        <el-button icon="el-icon-edit"   v-if="permissions.isEdit"   type="text" size="small" @click="handleUpdate(scope.row)">修改</el-button>
                        <el-button icon="el-icon-delete" v-if="permissions.isDelete" type="text" size="small" @click="handleDelete(scope.row)">注销</el-button>
                      </template>
                    </el-table-column>
                  </el-table>

展示效果：

image.png