elementui穿梭框如何接收服务器传来的数据
时间: 2024-05-03 22:16:37 浏览: 50
要接收服务器传来的数据,你需要将数据绑定到穿梭框组件的数据源上。首先,在你的Vue组件中引入穿梭框组件:
```
<template>
<div>
<el-transfer
v-model="value"
:data="data"
:titles="['Source', 'Target']"
:filterable="true">
</el-transfer>
</div>
</template>
<script>
import { ElTransfer } from 'element-ui'
export default {
components: {
ElTransfer
},
data() {
return {
value: [],
data: []
}
}
}
</script>
```
注意,在这里我们绑定了一个空数组到`data`属性上。接下来,在组件的`created`生命周期钩子中,你可以使用`axios`或其他方式从服务器获取数据,并将数据绑定到`data`属性上:
```
<script>
import { ElTransfer } from 'element-ui'
import axios from 'axios'
export default {
components: {
ElTransfer
},
data() {
return {
value: [],
data: []
}
},
created() {
axios.get('/api/data')
.then(response => {
this.data = response.data
})
.catch(error => {
console.log(error)
})
}
}
</script>
```
在这个例子中,我们使用了`axios`来获取服务器传来的数据,并将数据赋值给`data`属性。这样一来,穿梭框组件就可以使用这些数据来显示和操作穿梭框中的选项了。
阅读全文