第一步:创建一个组件tables
<template>
<div>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
v-for="(item,index) in carr" :key="index"
:label="item.title"
:prop="item.prname">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default{
props:['tableData','carr'],
}
</script>
第二部,在页面中使用,传不同的表头,和不同的数据内容,主要字段名要对应 label和prop
<template>
<TableSv :tableData="tableData" :carr="carr"/>
</template>
<script>
import TableSv from '@/components/TableSv.vue';
export default {
data() {
return {
carr:[
{
title:'姓名',
prname:'name'
},
{
title:'日期',
prname:'date'
}
],
tableData: [{
date: '2016-05-02',
name: '王小虎'
}, {
date: '2016-05-04',
name: '王小2'
}]
}
},
components: { TableSv }
}
</script>