使用Vue+element-ui封装一个简单的表格组件

使用Vue+element-ui封装一个简单的表格组件

表格是展示数据比较直接的方式，所以使用Vue做后台管理系统的时候，很多地方都需要表格展示。这些表格往往都有一些相同的地方。我们可以把他提取出来做成一个通用组件。希望对你有所帮助

更多属性请查阅官方文档;

Table.vue

<template>
  <el-table
    header-row-class-name="header-style"
    class="table"
    border
    stripe
    :data="data"
    v-on="$listeners"
  >
    <el-table-column
      v-for="item in tableProp"
      :key="item.prop"
      :type="item.type"
      :label="item.label"
      :prop="item.prop"
      :fixed="item.fixed || false"
      :align="item.align ? item.align : 'center'"
      :width="item.width"
      :formatter="item.formatter"
    >
     <!--使用表格表格插槽 -->
      <template v-if="item.slot" v-slot="scope">
        <slot
          :name="item.prop || item.name"
          :row="scope.row"
          :index="scope.$index"
        ></slot>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: "etable",
  props:{
   data: {
      required: true,
      type: Array
    },
    tableProp: {
      type: Array,
      required: true
    }
   }
  }
};
</script>

使用

<template>
   <etable :tableProp="getTabelProp" :data="list.data">
     <!--#operate 是插槽指令的简写  -->
       <template #operate="{row,index}">
           <span>编辑</span>
           <span>删除</span>
       </template>
   </etable>
</template>
<script>
const tableProp = [
  {
    label: "a标签",
    prop: "a"
  },
  {
    label: "b标签",
    prop: "b",
    slot: true
  },
  {
    label: "c标签",
    prop: "c",
    slot: true
  },
  {
    label: "d标签",
    prop: "d"
  },
  {
    label: "操作",
    //slot = true时 代表开启插槽 这里用的是具名插槽所以默认会取 prop或者是name
    slot: true,
    name: "operate",
    width: 200
  }
];
import Table from "Table.vue";
export default {
  data() {
    return {
     list:{
        data:[{
            a:"1",
            b:"2",
            c:"3",
            d:"4"
        }],
        total:0
     }
    }
  },
  components: {
    Table
  },
  computed: {
    getTabelProp() {
      return tableProp;
    },
  }
}
</script>