给定一个结构，如何生成对应的多级表头的表格？ const fields = [ { label: "A", prop: "A" sub: [ { label: "A1", prop: "A1" }, { label: "A2", prop: "A2" } ] }, { label: "B", prop: "B", sub: [ { label: "B1", prop: "B1" }, { label: "B2", prop: "B2" } ] } ] 如果给定的是一个固定层次的嵌套结构，我们可以用两层循环完成。但是当嵌套层次不确定的话，应该怎么递归的生成呢？在vue中该怎么实现？ <a href="https://link.segmentfault.com/?enc=Mla5rWeK3nvdA7Ad7KdZ5g%3D%3D.X15e0ThuV2zcPb1Y6KgpeUh3Fjyl9p9WnMm7sPK5Q8OANjUauoNwGl6UweqykvGAqBsv7Ov%2BJ5dRmlKs49hM20xHHc2Ug%2FTrUb7ZAbKy1%2FNnGVgNRAQpzrXSDAdIIlJD81iX9hpGCgxA2pEW9BMk8aJsgzdzNEYvj1q%2FKtfhAA932DIZs91K4GTZYUjjrDNCWW1SmenJSOoaLehAfoKg94uAdDukbHyoa1YOPJBhT9%2F1IIM1%2BXLxYdOzT9ih4Bs9IVTIdEEmSvk1pbFXgQdS6O%2BOHh8mKsASZ8uB0CuEJwjgHhTicciW1HiyaYJYezKj38klr4fzI4xR7JFKvR6JK%2B6YH3aS3UCV8CrhJ%2Fu4fbk%2BzGZV6p8WSotcJiZbFFyjE5ugHBEK4owWhX4x85Qck4ehWoV2xjvpthR%2BmfYo414Mh2rXyCbTxCRH%2FBDTz9c29lx%2Fi2jaBnLToZ6LjstwKAdhnaCViYxuFbWiAoYwn9YqduDQ4zFfTqexc489%2Bl7iDVXhix6uyXrcKMRIK9MyGIVwnPkwkFz7Sd6yCW7XPZvGNlIxpZsDpztzx8DX4jElVvMbp2ZqBzk9JtsAdHzZYjYqgSVI57s%2BQUiMY5yLHuSgW0wEUSZavbBk6%2BUkAV%2F71%2B%2BocW1wDFgtvjb3E8U2EviLnwT03OlBPEM4c83Da22z4AohO1re6Wm5xmfBs%2FbF3N5K%2F8AY6ADpUdc5Yakz4DRp3crIkJYixeENY%2F4CDjcqSDv0Dr8VsHJFt8ZJ10d0dX3AcwrlJfhJ5YKeW0jby0OzwP4XQqcrYaiXoABi9CmnDICXyi4a%2Bt6wl6pAo7QFyfUFtXdyCQpc70ayAuuNnoL2LFNF4Xp6u20%2F2P%2Fk564%2FP4WyzZEMJAv8dIp0CggM2qtNDTtKwk%2Bk2LghCP4Xw0P0t4gHVqMuccEdpse7o%2F%2BrkoLdMTYfUIgV3XiGiLG%2F7wjkgYw5Y7%2Bkl8cJtLACcq0hzghgpGXyeBB66Bm1WZnE5mpm8vk59GgTHQ709IzFIJj0qJRDj%2BYdFuoKe13IGZXxNtzI2ZZWeBFj9y1XWLhzQtk2oGtQm76NZJCA1uSWTBDwyX%2B9N7HWGISaiRBs%2BFIoX2MDqqaXJ6zubJOXjAFFuLngH22z14oLcu28zHg0Rm%2FFKzHmiXLs9UrunqwumgYRTuCBH6vE8MEV40x7tKpoi9ed3ngetFqDKizXTQMj%2F7kEoPNRODEuXN%2BOMh%2Bo4VhomNy852zB6NZJ7oVAZ7DRBDLvNOWSyV1kAXI8efmXm2DM3zXP%2Bp9LB%2FRwYIgI90LMEhp8tMBPjB70pUdQbh5xWJvdTlU%2FexkibL4cutfPeH6F8SjRGC1mmM6N91lmOJJ4FTCRHwO7fnB9Ly76s1R5ftxdAOwifxaVdRpamT36Gh7K7sI%2Bf%2BSVLnOawm8g41ElekU%2BWB2CqDLQvDDIkEzw7hS8CgN9SbYIHLapNJ3FUNx0%2BuMJuhT4a4N%2FSGNvUbnAUlGdOz20WgygRvPg8xHhZ3UIbwONoGobShKhwC4R%2BxNYDnbm%2FivK4wILm0oww97Vo426NuRe6yaHpHxDPjZJjk%2B9paDZi9L5fW12FteWfGQ8%2Fw0tRJKpkZr5MbwTi%2FckpxeXK5%2F%2BnlR4vMW5XEUSoPd8kXmI606cSAm7wMMqh6xYK%2BLY402dUmjSxA4DR62MJu6Gi7%2FsN%2FaAvaK%2ByWbwgPJG%2B0AIOaD2yvogr3up9Hl65xoQ6L%2Bx8jpZ7o5U6inr6j5if%2BUZNG4%2FseQtbdx1Z0jNdQmf7S8XnK%2B%2BqIx5SwyqEI0f7%2BCOJFC4VmQDLuP6BsxQ0biZ85e0VCgZyWez12WTV2QJLbzuSAzZrQRsIAfXYo0iTND216AF8MjxfQKfkCLccDIOHTaiuINtRaPhyIZlh26k6VNS8A4JiVNNs7xsf0Eu%2FpygnuFroMxzBl2J64j0KW1UAieLX%2BOQ5BSgayr9dKSEidUvi6ob4BcEj7JcRwlW7Q80cuTdopHLQAfZT2hu7MRZ2SaCz8Vcc1NLx5zt8Jc5TvPOSLBiDaiDTmSE%2FQsUdwxyRL0FXukzjlQEhniz2U1LC2d%2BXYyav%2FQzZB%2Flnqai1ARK0e4n%2BVNBA94R0uLz2rEGoilDch%2Ba%2FqwzYR7nKCtu%2BPJS1Uhvgl%2FYBxby3RAQrGDHTaL4fdjDaZAUhaDhlYNTq%2BEB0rpigNr1ayJKKyyFq7ltumzDTK1G0eHWw6pg%2B992X6ohvD5oRpAtDOlw6dOYMwHgt4wVfTeDThCz4Z%2FuJaCWAo%2FX3jzhw1yYrcKkHWPYEY5VDxpbUGUzFBOiFa9xnhk6MhOhkRx6%2BkRcxI%2Fty2h62%2FPlC%2B6u1X1PYszTdjp9523hl3a%2FGfxmZ2Mge0TdyIxtyEBcLTgazRj2j3ZEnAGwEqK53fKDMc0A9Vkr%2BNOZaHfBhxsgvAP0ON%2BwndoLjk5ZLytgc%2BFJCjsfJuE4CSd8rh5BmtTbCubbZTSKIOJ%2FVSHti8GnTU2hHKIyRPy%2BmPTjgg7DdoDmTljQuQq1TpLhkMqb0CoTO3Dh1kzK1QTADHG1ZzlV85G6p2vk9TGoP4726qZkacNQHRK2JcAnnjtSNb1mELvrMf%2Frh4Qq85bdBDjDJd2XVmA9PwAxwZXEzhM%2BHtYGso5pPVcI8xHxxi%2FcQlAZ4SvL92M4wR0tzTJwKgq6J6CtWS7JwfCIQ%2BPetKTtrHj7czSN%2BFbizj4gcE045QCq6lPKgr2CDlriLW9HB7pQEahm7evH%2FdVTAinflf5iHMldtN2WDULIQ77ImQFzBvyBNyO66jeNg%2F96xr336FW%2BVSlR2uaeu1V9DxfTfVQzy84xj1gF26WIKLAdxBBDplzA3XOnVQb0nNET2TAdbQmaTX9nPGT%2BO9YfpMeZD6DXepNnBi3WAEulqzc2N3RAfWtSbWuTVufWaT%2FyXKiA%2BL7SKipV%2BjGk9XCEZx%2BN0OYEZRO3fCjT3RHqt2hw5LH1HKB5JIDdNc9s4agfLzHZPGtpyoSFwZjY2ym4liYC1W5rciHYTGJLOak9KuPLgpnWyLrStljwMyCVbq8NfnBqvOvwXqLv94J01p%2FYXgzONh%2BkZZdO%2Fp0qzGQhTaFhM73bQ5rj14%2FpwbbJlNnpu0BJ%2BSngdxaC" rel="nofollow" target="_blank">固定就2层嵌套结构下的实现 <script setup lang="ts"> import { ref, version as vueVersion } from 'vue' import { version as epVersion } from 'element-plus' import { ElementPlus } from '@element-plus/icons-vue' const fields = [ { label: "A", prop: "A", sub: [ { label: "A1", prop: "A1" }, { label: "A2", prop: "A2" } ] }, { label: "B", prop: "B", sub: [ { label: "B1", prop: "B1" }, { label: "B2", prop: "B2" } ] } ] const tableData = [ { A1: "peter", "A2": "huan", B1: "tom", B2: "li" }, { A1: "peter", "A2": "huan", B1: "tom", B2: "li" }, { A1: "peter", "A2": "huan", B1: "tom", B2: "li" }, { A1: "peter", "A2": "huan", B1: "tom", B2: "li" }, ] </script> <template> <el-table :data="tableData"> <el-table-column v-for="item in fields" :prop="item.prop" :label="item.label"> <template v-if="item.sub"> <el-table-column v-for="subItem in item.sub" :prop="subItem.prop" :label="subItem.label" > </el-table-column> </template> </el-table-column> </el-table> </template>

给定一个结构，如何生成对应的多级表头的表格？

const fields = [
  {
    label: "A",
    prop: "A"
    sub: [
      {
        label: "A1",
        prop: "A1"
      },
      {
        label: "A2",
        prop: "A2"
      }
    ]
  },
  {
    label: "B",
    prop: "B",
    sub: [
      {
        label: "B1",
        prop: "B1"
      },
      {
        label: "B2",
        prop: "B2"
      }
    ]
  }
]

如果给定的是一个固定层次的嵌套结构，我们可以用两层循环完成。但是当嵌套层次不确定的话，应该怎么递归的生成呢？在vue中该怎么实现？

固定就2层嵌套结构下的实现

<script setup lang="ts">
import { ref, version as vueVersion } from 'vue'
import { version as epVersion } from 'element-plus'
import { ElementPlus } from '@element-plus/icons-vue'

const fields = [
  {
    label: "A",
    prop: "A",
    sub: [
      {
        label: "A1",
        prop: "A1"
      },
      {
        label: "A2",
        prop: "A2"
      }
    ]
  },
  {
    label: "B",
    prop: "B",
    sub: [
      {
        label: "B1",
        prop: "B1"
      },
      {
        label: "B2",
        prop: "B2"
      }
    ]
  }
]

const tableData = [
  { A1: "peter", "A2": "huan", B1: "tom", B2: "li" },
  { A1: "peter", "A2": "huan", B1: "tom", B2: "li" },
  { A1: "peter", "A2": "huan", B1: "tom", B2: "li" },
  { A1: "peter", "A2": "huan", B1: "tom", B2: "li" },
]
</script>

<template>
  <el-table :data="tableData">
    <el-table-column v-for="item in fields" :prop="item.prop" :label="item.label">
      <template v-if="item.sub">
        <el-table-column  v-for="subItem in item.sub" :prop="subItem.prop" :label="subItem.label" >
        </el-table-column>  
      </template>
      
    </el-table-column>
  </el-table>
</template>

vue3 递归 element-plus

阅读 1.4k

AI BotBETA

为了递归地生成多级表头的表格，你可以使用递归组件来处理嵌套的fields结构。在Vue中，你可以创建一个组件，该组件接受fields数组作为输入，并根据需要渲染el-table-column和嵌套的el-table-column。

以下是一个递归组件的示例，它可以根据给定的嵌套fields结构生成多级表头：

<template>
  <el-table-column
    v-if="!Array.isArray(fields)"
    :prop="fields.prop"
    :label="fields.label"
  />
  <el-table-column
    v-else
    :label="fields[0].label"
  >
    <template v-slot:header>
      <!-- 这里可以添加自定义的表头内容 -->
      <span>{{ fields[0].label }}</span>
    </template>
    <nested-table-header
      v-for="(subField, index) in fields"
      :key="index"
      :fields="subField.sub"
    />
  </el-table-column>
</template>

<script>
export default {
  name: 'NestedTableHeader',
  props: {
    fields: {
      type: [Array, Object],
      required: true,
    },
  },
};
</script>

在你的主组件中，你可以这样使用它：

<template>
  <el-table :data="tableData">
    <nested-table-header
      v-for="(field, index) in fields"
      :key="index"
      :fields="field"
    />
  </el-table>
</template>

<script>
import NestedTableHeader from './NestedTableHeader.vue';

export default {
  components: {
    NestedTableHeader,
  },
  data() {
    return {
      fields: /* ...你的fields结构... */,
      tableData: /* ...你的表格数据... */,
    };
  },
};
</script>

注意，在上面的示例中，NestedTableHeader组件检查传入的fields属性是否是数组。如果是，则递归地渲染嵌套的表头；如果不是，则直接渲染一个el-table-column。这允许你处理任意嵌套级别的表头。

请确保你的Vue版本和Element Plus版本支持上述功能，并根据需要进行调整。

2 个回答

得票最新