對ElementUI的表格組件進行封裝

 

1、進行準備工作

爲了方便使用，在componts裏創建index.js

import TmTable from './vue/table.vue';

export TmTable;

爲了方便引用和路徑的維護，首先在build文件夾下的webpack.base.conf.js對路徑進行修改。

這樣就可以在vue文件中對組件進行引用

import TmTable from ‘components/table’

2、接下來對錶格進行封裝（在components裏創建一個vue文件夾，在文件夾裏創建一個table.vue組件）

<template>
  <el-table :data="dataSource" stripe style="width: 100%" @selection-change="handleSelectionChange">
    <!--選擇-->
      <el-table-column v-if="hasSelection" type="selection" width="55"></el-table-column>
    <!--序號-->
      <el-table-column v-if="hasIndex" type="index" width="55"></el-table-column>
    <!--數據源-->
    <el-table-column v-for="(column, index) in columns"
                     v-if="column.isShow"
                     header-align="left"
                     :sortable="column.hasSort"
                     :key="column.prop"
                     :prop="column.prop"
                     :label="column.label">
    </el-table-column>
    <!--操作-->
    <slot name="handleColumn"></slot>
  </el-table>
</template>

<script>
    export default {
      name:'tm-table',
      props:{
        //是否可以選擇
        hasSelection:{
          type:Boolean,
          default:function () {
            return false
          }
        },
        //是否有序列項
        hasIndex:{
          type:Boolean,
          default:function () {
            return false
          }
        },
        // 這是相應的字段展示
        columns: {
          type: Array,
          default: function () {
            return []
          }
        },
        // 這是數據源
        dataSource: {
          type: Array,
          default: function () {
            return []
          }
        },
      },
      methods:{
        //將選中的行發送到父組件
        handleSelectionChange(val) {
          const selectionArr = [];
          val.forEach(function (el) {
            selectionArr.push(el);
          });
          this.$emit('commitSelection', selectionArr);
        },
      }
    }
</script>

<style scoped>

</style>

3、對組件進行引用

<template>
  <div>
    <tm-table v-bind:columns="columns" :dataSource="dataSource" :hasIndex="true">
      <div slot="handleColumn">
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">編輯</el-button>
          </template>
        </el-table-column>
      </div>
    </tm-table>
  </div>
</template>

<script>
  import TmTable from "../../components/vue/table";

  export default {
    components: {TmTable},
    data() {
      return {
        columns: [{
          hasSort: false,  //<Boolean> 是否排序
          isShow: true,  //<Boolean> 是否展示
          prop: 'name',   //<String>  對應屬性名
          label: '姓名',  //<String>   表頭標籤
        },
          {
            hasSort: false,  //<Boolean> 是否排序
            isShow: true,  //<Boolean> 是否展示
            prop: 'date',   //<String>  對應屬性名
            label: '日期',  //<String>   表頭標籤
          },
          {
            hasSort: false,  //<Boolean> 是否排序
            isShow: true,  //<Boolean> 是否展示
            prop: 'org',   //<String>  對應屬性名
            label: '單位',  //<String>   表頭標籤
          },
          {
            hasSort: false,  //<Boolean> 是否排序
            isShow: true,  //<Boolean> 是否展示
            prop: 'id',    //<String>  對應屬性名
            label: '身份證', //<String>   表頭標籤
          }],
        dataSource: [
          {
            name: '小明',
            id: '123456',
            org: '程序員',
            date: '2017-12-12',
            sex: '男'
          },
          {
            name: '小紅',
            id: '456789',
            org: '行政',
            date: '2017-11-12'
          },
        ]
      }
    },
    methods: {
      handleClick(row){
        console.log(row.id+"-------")
      },
    }
  }
</script>

<style scoped>

</style>