组件
名称小写==》 用-链接
02===>
属性==> empty-text="暂无数据" 当表格中没有数据 就会显示 暂无数据
<el-table-column v-for="item in tabColumn" :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width" :align="item.align" empty-text="暂无数据" > </el-table-column>
03==>
:align="item.align" 是居中的方式 有 left center right
组件.vue
<template> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column v-for="item in tabColumn" :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width" :align="item.align" empty-text="暂无数据" ></el-table-column> </el-table> </template> <script> export default { props: { // 传递过来的值 tableData: { type: Array, //数组类型 required: true //必须值 }, // 字段样式的数组 tabColumn: { type: Array, required: true } }, data() { return {}; } }; </script>
使用组件的页面(父)
<template> <div> <mytab :tableData="tableData" :tabColumn="tabColumn"></mytab> </div> </template> <script> import mytab from "../../../components/my-tab"; export default { data() { return { // 表格数据 tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市 1518 弄", "tel":"18383838", }, { date: "2016-05-04", name: "小玩法", address: "上海市普陀1517 弄", "tel":"18383838", }, { date: "2016-05-01", name: "王小", address: "上海市普陀1519 弄", "tel":"18383838", }, { date: "2016-05-03", name: "王虎", address: "上海市普陀区1516 弄", "tel":"18383838", } ], // 字段数组 tabColumn: [{ prop: 'date', label: '日期', width: '180', align:'left', }, { prop: 'name', label: '姓名', width: '180', align:'center', }, { prop: 'address', label: '地址', width: '180', align:'center', }, { prop: 'tel', label: '电话', width: '180', align:'center', } ], }; }, components: { mytab } }; </script>