封装elementUI-表格组件

本文给出子组件的原代码，以及父组件的应用demo。可以来我的主页看我封装的其他组件

```javascript
<template>
  <el-table 
    :data="data" 
    :border='border'
    :stripe='stripe'
    :height='height'
    :fit ='fit'
    :formatter_Prop='formatter_Prop'
    :formatter_Data='formatter_Data'
    @row-contextmenu='rowContextmenu'
    @row-dblclick='rowDblclick'
    @selection-change='selectionChange'>
    <!-- 对应列的类型 selection/index/expand -->
    <template v-for="(typeItem, index) in table_types">
      <el-table-column 
        :key='index' 
        :type="typeItem.type" 
        :fixed='typeItem.fixed' 
        :label='typeItem.label'>
      </el-table-column>
    </template>
    <!-- 展示后台给返的数据 -->
    <!-- <template > -->
      <el-table-column 
        v-for="(column, index) in columns"
        :prop="column.prop" 
        :key='column.label' 
        :label="column.label"
        :align="column.align?column.align:'left'" 
        :header-align="column.header_align?column.header_align:column.align" 
        :width="column.width?column.width:'auto'"
        :fixed='column.fixed?column.fixed:false'>
        <template slot-scope="scope">
          <!-- 没有button时，直接渲染 -->
          <template v-if="!column.button">
              <span>
                <!-- formatterProp为格式化之后的字段，请在父组件进行格式化 -->
                  {{scope.row[column.formatterProp]?scope.row[column.formatterProp]:scope.row[column.prop]}}
              </span>
          </template>
          <!-- 有button时 -->
          <template v-if='column.button'>
              <el-button :key="index" class="tableButton" @click="clickButton(scope.row)">
                <span>
                  <!-- formatterProp为格式化之后的字段，请在父组件进行格式化 -->
                  {{scope.row[column.formatterProp]?scope.row[column.formatterProp]:scope.row[column.prop]}}
                </span>
              </el-button>
          </template>
        </template>
      </el-table-column>
    <!-- </template> -->
    <template v-if='column_edit.label'>
      <el-table-column :label="column_edit.label" 
        :align="column_edit.align" 
        :header-align="column_edit.header_align?column_edit.header_align:column_edit.align">
        <template slot-scope="scope">
          <!-- 编辑/移除按钮时 -->
          <template v-for='(buttonItem,index) in column_edit.buttons'>
              <el-button :key="index" class="editButton" @click="editButtonClick(buttonItem.event,scope.row)">
                {{buttonItem.label}}
              </el-button>
          </template>
        </template>
      </el-table-column>
    </template>

  </el-table>
</template>

<script>
  export default {
    name: 'Table',
    data() {
      return {
      }
    },
    props: {
      height: { //表格高度，非必传。
        type: Number,
        require: false,
        default :100
      },
      stripe: { //是否为斑马条纹，非必传，默认不显示斑马条纹效果。
        type: Boolean,
        require: false,
        default :false
      },
      border: { //是否带有纵向边框，非必传，默认有纵向边框。
        type: Boolean,
        require: false,
        default :true
      },
      fit: { //列的宽度是否自撑开，非必传，默认有true。
        type: Boolean,
        require: false,
        default :true
      },
      data: { //表格数据，非必传，数组格式。
        type: Array,
        require: false,
        default () {
          return []
        }
      },
      formatter_Prop: { //要给表格的某列格式化的字段，非必传，数组格式。
        type: Array,
        require: false,
        default () {
          return null
        }
      },
      formatter_Data: { //包含要给表格的某列格式化的字段对应的数据内容，非必传，数组格式。
        type: Array,
        require: false,
        default () {
          return []
        }
      },
      columns: { //表头数据，需要展示的列，必传，数组嵌套对象的格式 [{},{},...] 。
        type: Array,
        require: false,
        default () {
          return []
          //可选参数{ label:'', prop:'' , align:'left（默认）/center/right' , width:'number' ,fixed:true（默认）/left/right}
        }
      },
      table_types: { //对应列的类型 selection/index/expand
        type: Array,
        require: false,
        default () {
          return []
        }
      },
      column_edit: { //表格的操作-编辑/删除等
        type: Object,
        require: false,
        default () {
          return {
            buttons:[],//必传
            align:'left',
            header_align:'left',
            label:''
          }
          //用法如下
          //{bottons:[{label:'按钮名称XXX',event:'点击按钮XXX父组件触发的事件名'},{label:'XXX',event:''}...],
          // align:'center/left/right'              按钮单元格的内容区的元素对齐方式 非必传 默认left
          // header_align:"center/left/right"}      按钮单元格的表头的对齐方式 非必传 默认left
          // width:Number                           按钮单元格的宽度 非必传 
        }
      },
    },  
    methods: {
      /* 点击表格的按钮 */
      clickButton(rowData) {
        console.log(rowData)
        this.$emit('click-button', rowData)//触发父组件事件@click-button，参数为当前行的数据。
      },

      /* 勾选表格的多选框 */
      selectionChange(selection) {
        console.log(selection)
        this.$emit('selection-change', selection)//触发父组件事件@selection-change，参数为当前行的数据。
      },

      /* 点击表格的编辑/删除按钮时 */
      editButtonClick(methodName,rowData) {
        console.log(methodName)
        // methodName 是什么返回给父组件事件名称就是什么。
        this.$emit(methodName,rowData)//将点击按钮的事件名，传给父组件@methodName，参数为当前行的数据。
      },

      /* 当某一行被鼠标右键点击时会触发该事件 */
      rowContextmenu(row, column, event) {
        console.log(row, column, event)
        this.$emit('row-contextmenu',row, column, event)//触发父组件事件@row-contextmenu。
      },

      /* 当某一行被双击时会触发该事件 */
      rowDblclick(row, column, event) {
        console.log(row, column, event)
        this.$emit('row-dblclick',row, column, event)//触发父组件事件@row-dblclick。
      },
    },
    watch: {
    },
    computed:{
    },
    mounted() {
    },
    created() {
    },
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .tableButton {
    padding: 0px;
    border: none;
    color: #0070D2;
    font-size: 12px;
  }
  .editButton {
    padding: 4px 20px;
    color: #002257;
    font-size: 12px;
  }


</style>

使用-template

            <Table 
              :data='tableData3' 
              :columns='column' 
              :height="tableHeight"
              @click-button="handleClick"
              :table_types='optionstable'
              :column_edit='columnEdit'
              :formatter_Prop='formatterProp'
              :formatter_Data='[datadjzt]'
              @handleEdit='handleEdit'
              @handleDelete='handleDelete'
              @selection-change='handleSelect'>
              </Table>

使用-data

optionstable:[
          {
            type:'selection',
            fixed:true,
          },
          {
            type:'index',
            label:'序号',
            fixed:true,
          },
        ],
        formatterProp:['djZt'],
        columnEdit:{
          label:'操作',
          buttons:[
          {
            label:'编辑',
            event:'handleEdit'
          },
          {
            label:'删除',
            event:'handleDelete'
          },
        ],
        align:'center',
        header_align:'left',//非必传，默认align是啥它就是啥
        },
        column:[
          {
          prop:'djRq',
          label:'单据日期',
          align:'center',
          header_align:'right',
          width:90,
          fixed:true,
          },
          {
            prop:'nsztmc',
            label:'纳税主体名称',
          },
          {
            prop:'djZt',
            label:'单据状态',
            align:'center',
            formatterMethod:'djztValue',
            button:true,
          },
        ],

使用-method

      //data中定义的点击按钮的方法名称
      handleEdit(rowData){
        console.log(rowData)
      },
      //data中定义的点击按钮的方法名称
      handleDelete(rowData){
        console.log(rowData)
      },
      //某列的数据的点击事件
      clickButton(rowData){
        console.log(rowData)
      },
      //勾选表格
      handleSelect(selection, row) {
        console.log(selection);
        this.rowbianji = selection;
      },