vue 组件之纯表格渲染--没有事件交互

组件
名称小写==》 用-链接

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-
      empty-text="暂无数据"
    ></el-table-column>
  </el-table>
</template>


<script>
export default {
  props: {
    // 传递过来的值
    tableData: {
      type: Array,数组类型
      required: true 必须值
    },1)">  字段样式的数组
    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  {
  data() {
     {
       表格数据
      tableData: [
        {
          date: "2016-05-02",name: "王小虎" 字段数组
     tabColumn: [{
          prop: 'date''180''name''center''地址''电话'