Element表格---接收数据库数据

订单页面HTML部分 ：

​<el-tabs //标签页组件
    model-value=""
    type="border-card"
    @tab-click="handleClick"
>
    <el-tab-pane  //标签页内容
        v-for="(item, index) in pageList"
        :key="index"
        :label="item.name"
        :name="item.name"
    >
        //自定义组件--使用element表格
        <paneContent :content-list="contentList"></paneContent>
    </el-tab-pane>
</el-tabs>

​

订单页面script部分：

<script>
export default {
  data() {
    return {
      contentList: null
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      const data = await this.$http.standard({
        url: "/order/getList",
        method: "post",
        data: { classify: "t1", pageN:"1" }  //classify和page这两个参数，分别是分类，和当前页，需要传给后端，后端在数据库做筛选再返回相应的数据列表。
      })
      if (data.errcode != 0) {
        this.contentList = data
      }
    }
  }
}
</script>

自定义组件paneContent:

<el-table
    v-if="contentList"
    style="width: 100%"
    :data="contentList.rows"
>
    <el-table-column type="selection" width="55" />
    <el-table-column
        label="订单编号"
        prop="sysId"  //数据库列表名
    />
    />
</el-table>