点击按钮 更新el-descriptions 数据
时间: 2024-01-13 15:23:52 浏览: 33
好的,你可以在按钮的点击事件中更新 `items` 数组的数据,然后再通过 Vue 的响应式机制自动更新到页面上。
具体代码如下:
```html
<template>
<div>
<el-button @click="updateData">更新数据</el-button>
<el-descriptions :column="3">
<el-descriptions-item v-for="(item, index) in items" :key="index" :label="item.name">
<div>id: {{ item.id }}</div>
<div>位置:{{ item.location }}</div>
</el-descriptions-item>
</el-descriptions>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ name: '12', id: '123', location: '位置1' },
{ name: '34', id: '456', location: '位置2' },
{ name: '56', id: '789', location: '位置3' },
],
};
},
methods: {
updateData() {
// 模拟异步请求新数据
setTimeout(() => {
this.items = [
{ name: '78', id: '012', location: '位置4' },
{ name: '90', id: '345', location: '位置5' },
{ name: '11', id: '678', location: '位置6' },
];
}, 1000);
},
},
};
</script>
```
在这个例子中,我们在 `data` 中定义了一个 `items` 数组,用于存储描述信息的数据。然后在按钮的点击事件中,通过 `setTimeout` 模拟异步请求新数据,并将新数据赋值给 `items` 数组,从而触发页面的重新渲染。这样,就可以实现点击按钮更新数据的功能了。