elementUI table组件简单封装（包括行点击事件和操作按钮事件）

1. elementui的table组件的简单封装
2. table组件根据父组件的传值进行渲染表格，父组件可以传表头，对应的表内容和是否要有加载动画
3. 需要对table组件进行操作，分为两种，分别是行点击事件和按钮操作事件

操作按钮事件

table组件

 

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="tableData" v-loading="load">
              <template v-for="(item, index) of table">
              <el-table-column v-if="item.id === 'operation'" :key="index" align="center" :prop="item.id" :label="item.name" :align="item.align?item.align:'center'" :width="item.width">
              <!--if判断的是父组件传的表头是操作的id名-->
                <template slot-scope="scope">
                  <el-button v-for="item1 in item.list" :key="item1.id" @click="examine(scope.row, item1.id)" type="text" size="small">{{item1.name}}</el-button>
                  <!--可以自行增加按钮，请改变点击事件的第二个参数，父组件会根据第二个参数判断当前点击的是什么按钮-->
                </template>
              </el-table-column>
              <el-table-column v-else :label="item.name" :key="index" align="center" :prop="item.id" :align="item.align?item.align:'center'" :width="item.width" :type="item.type"> </el-table-column>
              <!--可以传align,width和type来控制表格的居中，宽度和类型（比如需要序号，type传index）-->
            </template>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'tableList',
  props: ['table', 'tableData', 'load'],
  methods: {
    examine (rows, id) {
      this.$emit('operation', {id: id, rows: rows})
    }
  }
}
</script>

父组件调用方法

<template>
  <div>
    <table-list :table="table" :tableData="tableData" @operation="getExamine" :load="load"></table-list>
  </div>
</template>
<script>
import TableList from '@/components/table'
export default {
  components: {
    TableList
  },
  data () {
    return {
      load: false, //是否显示加载动画
      table: [ //表头
        {id: 'name', name: '地市'},
        {id: 'evaluationStudentNumber', name: '已测人数'},
        {id: 'operation', name: '操作', list: [{id: 'examine', name: '查看'}, {id: 'compile', name: '编辑'}]} // id名是固定的，如若改变，请同时改变table组件对应的地方
      ],
      tableData: [ // 表内容
        {
          name: '111',
          evaluationStudentNumber: '2222'
        },
        {
          name: '111',
          evaluationStudentNumber: '2222'
        },
        {
          name: '111',
          evaluationStudentNumber: '2222'
        },
        {
          name: '111',
          evaluationStudentNumber: '2222'
        }
      ]
    }
  },
  methods: {
    getExamine (e) { // 根据table组件传的不同的id进行不同的操作
      if (e.id === 'examine') {
        console.log('查看')
      }
      if (e.id === 'compile') {
        console.log('编辑')
      }
    }
  }
}
</script>