第一步:先创建一个父组件
名子为domeView.vue的组件
<template>
<div>
<TestView :data="arr" :date="arr1">
<template>
<el-button size="mini" type="primary">其他操作</el-button>
</template>
</TestView>
</div>
</template>
<script>
// import TestView from '../components/TestView.vue';
export default {
/* components: {
TestView,
}, */
data() {
return {
arr: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 456 弄'
},
],
arr1: [
{ label: '日期', prop: 'date' },
{ label: '姓名', prop: 'name' },
{ label: '地址', prop: 'address' }
]
};
},
};
</script>
在上面代码中我们看见了。引入眼帘一个子组件的名字叫TexsView.vue的组件名,然后用父传子的方法把arr和arr1传给了子组件,
第二步:创建一个名叫TestView.vue的子组件名
<template>
<div class="hello">
<el-table :data="data">
<el-table-column v-for="column in date" :key="column.prop" :prop="column.prop" :label="column.label">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="handleExtraAction(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: {
data: Array,
date: Array
}
}
</script>
在以上代码中我们用props接收的值,在arr1中我们看到了label和prop ,
在element-ul中我们有一个叫el-table-column的标签名,而他的属性就有label和prop,因此我们循环arr1就能实现我们的表头的操作,
在arr中我们看到了,一些数据我们在el-table中有一个属性叫data,我们用data循环arr,就能实现一个element-ul的表格封装