求助：element-plus如何实现动态多级表头？

vue

<el-table :data="tableData">
    <el-table-column label="店员数量评级金额">
      <template #default="scope">
        <el-table-column  v-for="(item,index) in scope.row.amountData" :key="item" :label="index +'个店员评级金额'">
                {{ item.price}}
        </el-table-column>
      </template>
    </el-table-column>
</el-table>

script

<script setup>
import { ref } from "vue";
const tableData = ref([
 {
    area: "华东",
    amountData: [{price:"100"},{price:"400"},{price:"600"},],
  },
])
</script>

期望结果

但是渲染不出？