【el-table】固定第一行,其他行可以鼠标滑动滚动,固定列用fixed属性

el-table有个属性fixed,给哪一列加上,就可以固定哪一列
在这里插入图片描述
实际使用

 <el-table-column type="index" label="序号" width="55" fixed="left" align="center"></el-table-column>

但是没有属性可以让行固定,朋友给了思路
有个属性是show-header,默认是展示表头的
在这里插入图片描述
我们用两个表格,第一个表头只展示一条数据,第二个表格让它不展示表头,加样式,overflow-y:hidden
【el-table】固定第一行,其他行可以鼠标滑动滚动,固定列用fixed属性_第1张图片

  <el-table
                ref="offromfixTable"
                :header-cell-style="{ 'text-align': 'center', background: '#b1defd' }"
                :data="offromfixTableList"
                :highlight-current-row="true"
                @row-click="infRowSelect"
                @selection-change="handleSelect"
                @select-all="handleSelect"
              >
                <el-table-column label="xxx" :show-overflow-tooltip="true" align="center" prop="proCode" />
                <el-table-column label="xxx :show-overflow-tooltip="true" align="center" prop="proName" />
                " :show-overflow-tooltip="true" align="center" prop="ratifyYear" />
                " :show-overflow-tooltip="true" align="center" prop="conUnit" />
              

              " :data="offromsecTableList" :show-header="false" style="overflow-y: hidden" height="200px">
                " :show-overflow-tooltip="true" align="center" prop="proCode" />
                " :show-overflow-tooltip="true" align="center" prop="proName" />
                " :show-overflow-tooltip="true" align="center" prop="ratifyYear" />
                " :show-overflow-tooltip="true" align="center" prop="conUnit" />
              </el-table>

调接口获取到数据后,将第一项push给列表一的数组,剩下的数据项shift第一项后赋值给列表二的数组。

你可能感兴趣的:(vue.js)