vue elementui card表头根据后台传回数据动态更新

在Vue中使用Element UI的Card组件，可以通过数据绑定的方式将表头动态更新。首先，在data属性中定义一个变量来存储后台传回的数据，比如称为headerList。然后，在Card的头部插槽中使用v-for指令遍历headerList数组，动态生成表头。最后，通过后台接口获取到数据后，将数据赋值给headerList变量，即可实现动态更新。

具体实现步骤如下：

1. 在data中定义headerList变量：

data() {
  return {
    headerList: [] // 存储表头数据
  }
}

2. 在Card的头部插槽中使用v-for遍历headerList数组：

<el-card>
  <div slot="header">
    <div v-for="header in headerList" :key="header.id">{{ header.name }}</div>
  </div>
  <!-- Card内容 -->
</el-card>

3. 在获取到后台数据后，将数据赋值给headerList变量：

methods: {
  fetchData() {
    // 发起后台请求获取数据
    // 假设通过axios发送请求，请求成功后将数据赋值给headerList
    axios.get('/api/header').then(response => {
      this.headerList = response.data; // 将后台返回的数据赋值给headerList
    }).catch(error => {
      console.error(error);
    });
  }
},
mounted() {
  this.fetchData(); // 在组件挂载完成后调用fetchData方法，获取并更新表头数据
}

通过以上步骤，即可实现根据后台传回的数据动态更新Card组件的表头。在获取到数据后，调用fetchData方法获取并更新表头数据，从而实现动态更新。