返回

主宰表格布局, element-ui动态列自定义展现

前端

自定义展现：掌控 Element-UI 表格动态列

前言

Element-UI 以其强大的前端 UI 框架而闻名，其表格组件因其丰富的功能和高可定制性而备受喜爱。然而，当涉及到动态列的自定义展现时，需要深入了解组件的内部机制并进行有针对性的改造。本博客将通过动手教程，带你了解如何实现这一目标，涵盖从拖拽表头到恢复默认配置的各种功能。

拖拽表头：自由调整列宽

默认情况下，Element-UI 表格允许通过拖拽表头调整列宽。但存在一个最小宽度限制，可能无法缩小到理想宽度。

.el-table--fit .el-table__header-wrapper th {
  min-width: 0;
}

通过修改此样式，即可解除最小宽度限制，实现随心所欲地调整列宽。

隐藏列：优化表格展现

有时需要隐藏某些列以优化表格展现。Element-UI 提供了此功能，但隐藏后的列仍然占据空间，导致布局混乱。

.el-table--fit .el-table__body tr td[style*="display: none"] {
  width: 0;
}

修改此样式可隐藏列及其占据的空间，实现真正的隐藏效果。

列冻结：轻松锁定重要列

在某些情况下，需要将重要列冻结在表格的左侧或右侧，以方便查看。Element-UI 提供了列冻结功能，但默认只能冻结一列且仅在左侧。

<el-table :data="tableData" :freeze-column-count="3" style="width: 100%">
  <el-table-column prop="name" label="姓名" width="100" frozen></el-table-column>
  <el-table-column prop="age" label="年龄" width="100" frozen></el-table-column>
  <el-table-column prop="address" label="地址" width="200"></el-table-column>
  <el-table-column prop="phone" label="电话" width="150"></el-table-column>
</el-table>

修改表格结构可实现多列冻结，并支持冻结在左侧或右侧。

列排序：轻松整理数据

对表格数据进行排序是另一种常见需求。Element-UI 提供了列排序功能，但默认只能对一列数据进行排序，且方式仅限于升序或降序。

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名" sortable="custom"></el-table-column>
  <el-table-column prop="age" label="年龄" sortable="custom"></el-table-column>
  <el-table-column prop="address" label="地址" sortable="custom"></el-table-column>
  <el-table-column prop="phone" label="电话" sortable="custom"></el-table-column>
</el-table>

修改表格结构可实现多列排序，并支持多种排序方式。

恢复默认配置：一键还原表格设置

在某些情况下，需要将表格还原为默认配置以方便重新配置。Element-UI 提供了此功能，但默认需要手动点击按钮才能恢复。

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名" width="100"></el-table-column>
  <el-table-column prop="age" label="年龄" width="100"></el-table-column>
  <el-table-column prop="address" label="地址" width="200"></el-table-column>
  <el-table-column prop="phone" label="电话" width="150"></el-table-column>
  <el-button type="primary" @click="resetTable">恢复默认配置</el-button>
</el-table>

修改表格结构可实现一键还原表格配置。

结论

通过这些技巧，你可以轻松构建灵活多变的表格应用，满足各种复杂需求。Element-UI 表格的强大功能和高度可定制性使你可以创建满足任何场景要求的自定义解决方案。

常见问题解答

1. 如何实现拖拽表头时不改变列的顺序？

.el-table__header th {
  position: sticky;
}

2. 如何禁用表头排序功能？

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名" sortable="false"></el-table-column>
  <el-table-column prop="age" label="年龄" sortable="false"></el-table-column>
  <el-table-column prop="address" label="地址" sortable="false"></el-table-column>
  <el-table-column prop="phone" label="电话" sortable="false"></el-table-column>
</el-table>

3. 如何动态调整表格的高度？

.el-table {
  height: calc(100vh - 100px);
}

4. 如何在表格中添加自定义操作按钮？

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名" width="100"></el-table-column>
  <el-table-column prop="age" label="年龄" width="100"></el-table-column>
  <el-table-column prop="address" label="地址" width="200"></el-table-column>
  <el-table-column prop="phone" label="电话" width="150">
    <template slot-scope="scope">
      <el-button type="primary" @click="handleOperation(scope.row)">操作</el-button>
    </template>
  </el-table-column>
</el-table>

5. 如何在表格中启用分页功能？

<el-table :data="tableData" style="width: 100%" :pagination="true"></el-table>