vue3.0+elementplus table动态添加column

<template>
  <el-table :data="tableData" border style="display: table-cell" ref="ymTable">
    <template v-for="val in test" :key="val.label" >
      <el-table-column :prop="val.prop" :label="val.label" width="200" />
    </template>
  </el-table>
  <el-button @click="cl">Default</el-button>
</template>

<script setup>
import {ref} from 'vue'

const ymTable = ref();

const cl = ()=>{
  ymTable;
}

const test = [
  {
    prop: 'date',
    label: 'Date'
  },{
    prop: 'name',
    label: 'Name'
  },{
    prop: 'address',
    label: 'Address'
  }];

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>