对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>