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

Posted 2021-03-24 iwishicould

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

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>