element列表接收数据
时间: 2023-11-23 22:55:30 浏览: 64
【JavaScript源代码】vue element实现表格合并行数据.docx
根据提供的引用内容,element-ui中的列表组件可以通过props属性接收数据。具体实现方法如下:
1. 在父组件中定义数据并传递给子组件:
```html
<template>
<div>
<my-list :data="listData"></my-list>
</div>
</template>
<script>
import MyList from './MyList.vue'
export default {
components: {
MyList
},
data() {
return {
listData: [
{
id: 1,
name: 'John'
},
{
id: 2,
name: 'Mary'
}
]
}
}
}
</script>
```
2. 在子组件中通过props接收数据并渲染列表:
```html
<template>
<div>
<el-table :data="data">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array,
required: true
}
}
}
</script>
```
在上述代码中,父组件中的listData通过props传递给子组件MyList,并在子组件中定义了一个名为data的props属性,类型为数组,必须传递。在子组件的模板中,使用element-ui的el-table和el-table-column组件渲染列表,并将props属性data作为数据源。
阅读全文