返回

花式定制表格展现，突破 el-table 单元格样式限制

前端

El-Table：让你的数据展示告别单调，尽显个性

打破传统布局：巧用单元格合并

想象一下，当你在处理大量的销售数据时，将每个商品的销售额进行合并，是不是瞬间让数据变得更加一目了然？这正是 El-table 合计行单元格合并的功能。通过 colspan 和 rowspan 属性，你可以轻松地将多列或多行数据进行合并，让你的表格展现更加简洁、直观。

<el-table :data="tableData">
  <el-table-column prop="productName" label="商品名称"></el-table-column>
  <el-table-column prop="salesAmount" label="销售额">
    <template slot-scope="scope">
      <div v-for="item in scope.row.sales" :key="item.month">
        <el-table-cell :colspan="2" :rowspan="scope.row.sales.length">
          {{ scope.row.productName }}
        </el-table-cell>
        <el-table-cell>{{ item.month }}</el-table-cell>
        <el-table-cell>{{ item.amount }}</el-table-cell>
      </div>
    </template>
  </el-table-column>
</el-table>

打造个性化视觉：自由修改单元格样式

除了单元格合并，El-table 还允许你对单元格的样式进行修改，让你自由地挥洒创意，打造出更加个性化、美观的表格展现。你可以调整字体、颜色、背景色、边框等样式，让你的表格更具视觉吸引力。

<el-table :data="tableData">
  <el-table-column prop="productName" label="商品名称">
    <template slot-scope="scope">
      <el-table-cell :style="{ color: scope.row.productNameColor }">{{ scope.row.productName }}</el-table-cell>
    </template>
  </el-table-column>
  <el-table-column prop="salesAmount" label="销售额">
    <template slot-scope="scope">
      <el-table-cell :style="{ color: scope.row.salesAmountColor }">{{ scope.row.salesAmount }}</el-table-cell>
    </template>
  </el-table-column>
</el-table>

突破限制：尽情展现 El-table 的定制技巧

单元格合并和单元格样式修改只是 El-table 强大定制功能的冰山一角。通过自定义表头样式、添加行或列序号、冻结表头或列、添加分页功能、使用自定义过滤器等技巧，你可以打造出更加美观、实用、个性化的表格。

自定义表头样式：让表头更加醒目

<el-table :data="tableData">
  <el-table-column prop="productName" label="商品名称">
    <template slot="header">
      <el-table-cell :style="{ color: '#FF0000', fontSize: '20px' }">商品名称</el-table-cell>
    </template>
  </el-table-column>
  <el-table-column prop="salesAmount" label="销售额">
    <template slot="header">
      <el-table-cell :style="{ color: '#00FF00', fontSize: '20px' }">销售额</el-table-cell>
    </template>
  </el-table-column>
</el-table>

添加行或列序号：快速定位数据

<el-table :data="tableData">
  <el-table-column type="index" label="序号"></el-table-column>
  <el-table-column prop="productName" label="商品名称"></el-table-column>
  <el-table-column prop="salesAmount" label="销售额"></el-table-column>
</el-table>

冻结表头或列：滚动时始终可见

<el-table :data="tableData" :freeze-header="true"></el-table>

添加分页功能：处理海量数据

<el-table :data="tableData" :pagination="true" :page-size="10"></el-table>

使用自定义过滤器：快速找到所需数据

<el-table :data="tableData" :filter-method="customFilterMethod"></el-table>

常见问题解答

1. 如何在单元格中显示换行符？

答：可以使用 <br> 标签进行换行。

<el-table-cell>{{ scope.row.description.split('\n').join('<br>') }}</el-table-cell>

2. 如何在单元格中插入图标？

答：可以使用 Font Awesome 或其他图标库的图标代码。

<el-table-cell><i class="fa fa-star"></i> {{ scope.row.rating }}</el-table-cell>

3. 如何让单元格的内容居中？

答：使用 text-align 属性。

<el-table-cell :style="{ textAlign: 'center' }"></el-table-cell>

4. 如何禁用单元格的排序功能？

答：使用 sortable 属性。

<el-table-column prop="productName" label="商品名称" :sortable="false"></el-table-column>

5. 如何在单元格中添加按钮或链接？

答：使用 <el-button> 或 <el-link> 组件。

<el-table-cell>
  <el-button @click="handleEdit(scope.row)">编辑</el-button>
  <el-link :href="scope.row.url" target="_blank">查看详情</el-link>
</el-table-cell>