second package elementUI table

1.HTML

<template>
  <el-table
      ref="table"
      element-loading-text="Loading"
      :data="tableData"
      border 
      tooltip-effect="dark"
      style="width:100%">
      <el-table-column v-for="(item,index) in tableLabel" :width="item.width ? item.width : ''" :key="index" :align="item.align" :label="item.label" :prop="item.param" :sortable="item.sortable ? 'custom' : false">
        <template slot-scope="scope">
          <span v-if="item.render">
            {{item.render(scope.row)}}
          </span>
          <span v-else>{{scope.row[item.param]}}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="tableOption.label" :width="tableOption.width" :label="tableOption.label" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button  v-for="(item,index) in tableOption.options" :key="index" :type="item.type" :icon="item.icon" @click="handleButton(item.methods,scope.row,scope.row)" size="mini">
            {{item.label}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
</template>

　　2. The subassembly js

<script>
export default {
  props:{
    tableData:{
      type:Array,
      default: () => {
        return []
      }
    },
    tableLabel:{
      type:Array,
      default: () => {
        return []
      }
    },
    tableOption:{
      type:Object,
      default: () => {
        return {}
      }
    }
  },
  components:{},
  methods: {

  }
}
</script>

　　3. The parent component calls

<table-cmp
      :table-data="tableData"
      :table-label="tableLabel"
      :table-option="tableOption"
    ></table-cmp>

　　4. parent component js

TableData: [], 
tableLabel: [ 
        {label: 'username', param: 'usr', align = left: 'Center', the sortable: to true}, 
        {label: 'Name', param: 'company', align: ' Center '}, 
        {label:' office mailbox ', param:' In email ', align = left:' Center ', width:' 200 is'}, 
        {label: 'registration date', param: 'registTime', align: 'center' , the sortable: to true}, 
        {label: 'approval status', param: 'status', align = left: 'Center', the sortable: to true, the render: (Row) => { 
            IF (row.status === 0) { 
              return 'unapproved' 
            } the else IF (row.status ===. 1) { 
              return 'approval' 
            } the else IF (Row.=== 2 Status) { 
              return 'audit is not' 
            } the else { 
              return 'disabled' 
            }
          }        
        }
      ],
      tableOption: {
        label: '操作',
        width: '200',
        options: [
          { label: '预览', type: 'primary', icon: 'el-icon-view', methods: 'preview' },
          { label: '审核', type: 'primary', icon: 'el-icon-upload2', methods: 'audit' },
        ]
      }

　　Second package, all information dynamically generated.