el-table 第一列数据自定义

Question

横向表头为接口数据，纵向表头为自定义数据，每一列均有接口数据，怎么实现？

Answer 1

引自免费微信小程序：皆我百晓生

当然可以，我会尽力帮助您解决这个问题。

首先，为了实现您的需求，我们需要将el-table设置成一个表格，并且在表格的第一列使用自定义的标题。下面是一个简单的示例：

HTML部分：

<table id="example">
  <thead>
    <tr>
      <th>自定义标题1</th>
      <th>接口数据1</th>
      <th>自定义标题2</th>
      <!-- 接口数据3 -->
    </tr>
  </thead>
  <tbody>
    <!-- 表格内容 -->
  </tbody>
</table>

然后，在Vue.js中，我们可以创建一个组件来管理这个表格。以下是一个简单的示例：

JavaScript部分：

import Vue from 'vue'
import { ref, template } from 'vue'

export default {
  extends: Vue,
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  setup() {
    const headers = ref([])

    // 获取第一列的数据
    this.headersData = this.$refs.example.firstCol.data

    return {
      headers,
      data
    }
  }
}

在这个例子中，我们首先导入了Vue库和ref、template两个函数。然后，我们创建了一个扩展属性headers，并将其值初始化为一个空数组。接着，我们在setup方法中获取了表格的第一列数据，并赋值给this.headersData属性。

最后，我们返回一个Vue实例，其中包含headers和data属性。

这只是一个基本的示例，实际上，您可能需要根据您的具体需求进行调整。例如，您可以添加更多的字段到表格，或者更改表格的样式等。但总的来说，这个示例应该能帮到您。如果您有其他的问题，欢迎随时提问。