Element Plus表格组件如何呈现复杂布局如图?

Element Plus的table表格如何实现下图的表格效果,

element的表格看起来是一列一列的,好像没办法实现这种效果,如果要实现这种图片效果需要如何做呢
image.png

阅读 3k
avatarAI BotBETA
要实现类似于图片中的复杂布局效果,使用 Element Plus 的表格组件(`<el-table>`)直接实现可能会有一些限制,因为表格通常是基于行和列的二维数据结构。不过,你可以结合其他 Element Plus 组件和自定义样式来实现这个效果。

以下是一种可能的实现思路:

1. **使用合并单元格**:
   利用 `<el-table-column>` 的 `span-method` 属性来合并单元格,以适应复杂的布局需求。

2. **嵌套表格**:
   在某些单元格中嵌套另一个 `<el-table>` 来实现更复杂的布局。

3. **自定义渲染**:
   使用 `<el-table-column>` 的 `formatter` 或 `scoped-slots` 来自定义单元格的渲染内容,例如插入图片、按钮等。

4. **CSS 样式**:
   使用 CSS 来调整表格和单元格的样式,以实现图片中的视觉效果。

由于无法直接看到图片中的具体布局,这里给出一个简化的示例,展示如何通过合并单元格和自定义渲染来实现类似的效果:

<template>
<el-table :data="tableData" border style="width: 100%">

<el-table-column prop="date" label="Date" width="180">
</el-table-column>
<el-table-column label="Delivery">
  <template slot-scope="scope">
    <el-table :data="[scope.row]" border style="width: 100%">
      <el-table-column prop="name" label="Name" width="180">
      </el-table-column>
      <el-table-column label="Address">
        <template slot-scope="innerScope">
          <div>
            <span>{{ innerScope.row.address }}</span>
            <!-- 可以在这里插入图片等自定义内容 -->
          </div>
        </template>
      </el-table-column>
      <!-- 可以添加更多列 -->
    </el-table>
  </template>
</el-table-column>
<!-- 可以添加更多列 -->

</el-table>
</template>

<script>
export default {
data() {

return {
  tableData: [
    {
      date: '2016-05-02',
      name: 'John Smith',
      address: '1234 Elm Street'
    },
    // 更多数据...
  ]
};

}
};
</script>

<style scoped>
/ 自定义样式 /
</style>


在这个示例中,我们在“Delivery”列中嵌套了一个表格来显示“Name”和“Address”。你可以根据需要调整嵌套表格的结构和样式,以实现更复杂的布局。

请注意,这只是一个基本的示例,具体实现可能需要根据你的实际需求和图片中的布局进行调整。
3 个回答

image.png
以下代码直接贴到页面内就可以看到如图效果. 需要element-plus的css库就能看到样式.
其中需要自己实现全选功能,即可! 如果满意回答, 请关注我一波. 给我个最佳答案!✌

  • 循环tbody内的两个tr, 第一个tr是自定义内容.
  • 第二个tr是表格内容.

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>自定义表格</title>
      <link rel="stylesheet" href="https://unpkg.com/element-plus@2.9.0/dist/index.css" />
    </head>
    
    <body>
      <div class="el-table">
          <div class="el-table__inner-wrapper">
              <div class="el-table__header-wrapper">
                  <table class="el-table__header" border="0" cellpadding="0" cellspacing="0" style="width: 1149px;">
                      <colgroup>
                          <col name="" width="55">
                      </colgroup>
                      <thead class="">
                          <tr class="">
                              <th class=" el-table-column--selection is-leaf el-table__cell"
                                  colspan="1" rowspan="1">
                                  <div class="cell"><label class="el-checkbox"><span class="el-checkbox__input"><input
                                                  class="el-checkbox__original" type="checkbox" id="el-id-1024-420"><span
                                                  class="el-checkbox__inner"></span></span></label>
                                  </div>
                              </th>
                              <th class="is-leaf el-table__cell" colspan="1" rowspan="1">
                                  <div class="cell">Date</div>
                              </th>
                              <th class="is-leaf el-table__cell" colspan="1" rowspan="1">
                                  <div class="cell">Nameroute</div>
                              </th>
                              <th class="is-leaf el-table__cell" colspan="1" rowspan="1">
                                  <div class="cell">Addressroute</div>
                              </th>
                          </tr>
                      </thead>
                  </table>
              </div>
              <div class="el-table__body-wrapper">
                  <table class="el-table__body" cellspacing="0" cellpadding="0" border="0"
                      style="table-layout: fixed; width: 1149px;">
                      <colgroup>
                          <col name="el-table_48_column_200" width="55">
                          <!-- <col name="el-table_48_column_201" width="366">
                          <col name="el-table_48_column_202" width="364">
                          <col name="el-table_48_column_203" width="364"> -->
                      </colgroup><!--v-if-->
                      <tbody tabindex="-1">
                          <tr>
                              <td colspan="1" rowspan="1"
                                  class="el-table-column--selection">
                                  <div class="cell"><label class="el-checkbox is-checked"><span
                                              class="el-checkbox__input is-checked"><input class="el-checkbox__original"
                                                  type="checkbox" id="el-id-1024-422"><span
                                                  class="el-checkbox__inner"></span></span><!--v-if--></label>
                                  </div>
                              </td>
                              <td>
                                  <span>啊啊啊啊</span>
                                  <span>吧吧吧吧</span>
                                  <span>村村村村村</span>
                                  <span>三诉讼诉讼</span>
                                  <span>的点点滴滴asdfasdfasdfsdaf</span>
                              </td>
                          </tr>
                          <tr class="el-table__row" style="background-color: beige;">
                              <td title="checkbox占未使用切勿删除"></td>
                              <td colspan="1" rowspan="1" class="el-table__cell">
                                  <div class="cell">2016-05-02
                                  </div>
                              </td>
                              <td colspan="1" rowspan="1" class="el-table__cell">
                                  <div class="cell">wangxiaohu</div>
                              </td>
                              <td colspan="1" rowspan="1" class="el-table__cell">
                                  <div class="cell">No. 189, Grove St, Los Angeles</div>
                              </td>
                          </tr>
                      </tbody>
                  </table>
              </div>
          </div>
      </div>
    </body>
    
    </html>
新手上路,请多包涵

ElementPlus表格在自定义行渲染上支持的并不是很开放,一些比较tricky的方法勉强可做到这个效果:
Element Plus Playground链接:https://tinyurl.com/hacbaxh2

但还是建议自定义组件来做。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏