【vue】elementUI中el-table拖动滚动条的时候固定某一列

在Element UI的el-table组件中，要实现拖动滚动条的同时固定某一列，可以使用CSS样式来实现固定列的效果。Element UI本身不提供直接的固定列功能，但可以通过CSS样式来模拟固定列的效果。

以下是一个简单的示例，展示如何使用CSS样式固定el-table中的第一列：

<template>
  <el-table
    :data="tableData"
    style="width: 100%; overflow: auto;"
  >
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150"
      style="background: #fff;"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120"
    ></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据列表
      ]
    };
  }
};
</script>
 
<style>
.el-table__fixed {
  height: 100% !important; /* 确保固定列的高度 */
}
.el-table__fixed-body-wrapper {
  height: 100% !important; /* 确保固定列的滚动区域高度 */
  overflow-y: auto !important; /* 开启滚动条 */
}
.el-table__body-wrapper {
  height: calc(100% - 40px) !important; /* 减去固定列的高度 */
}
</style>

在这个示例中，el-table组件被设置了style="width: 100%; overflow: auto;"，允许水平滚动。固定列通过fixed属性来指定，并通过CSS样式让固定列的背景保持#fff色调。

注意：这个示例假设你想固定第一列。如果你想固定其他列，你需要调整CSS样式，确保除了固定列之外的其他列都能在未固定列的空间内正确显示。