vue中封装el

vue中封装el"/>

vue中封装el

第一步：创建一个组件tables

<template><div><el-table:data="tableData"style="width: 100%"><el-table-columnv-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>