elementUI的el-table横向展示

Element UI的el-table组件默认是列表形式展示数据，不支持直接的横向展示。如果你想要横向展示表格数据，可以通过自定义列模板（<el-table-column>的template属性）来实现。

以下是一个简单的例子，展示如何通过自定义列模板来横向展示表格数据：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="150"></el-table-column>
    <el-table-column label="配送信息" width="300">
      <template slot-scope="scope">
        <div>
          <span>姓名: {{ scope.row.name }}</span>
          <span style="margin-left: 20px;">电话: {{ scope.row.phone }}</span>
        </div>
      </template>
    </el-table-column>
    <!-- 其他需要展示的数据可以继续添加 el-table-column -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '张三',
          phone: '1234567890',
        },
        // ... 其他数据
      ],
    };
  },
};
</script>

在这个例子中，我们定义了两列：日期和配送信息。配送信息列通过template属性定义了一个自定义模板，在模板中我们将name和phone横向并排展示。你可以根据实际需求添加更多的数据列，并通过类似的方式进行横向展示。