elementui table二次封装

   <el-table class="table" :data="tableData" border style="width: 100%" @row-click='jumpDetails'
     @selection-change="handleSelectionChange" empty-text row-key="id">

     <el-table-column align="center" v-if="multiple" type="selection" width="55"></el-table-column>

     <el-table-column :fixed="item.fixed" v-for="(item, index) in tableHeader" :key="index" :show-overflow-tooltip='item.tooltip' :sortable="item.sortable"
       :align="item.align" :header-align="item.headerAlign" :label="item.title" :min-width="item.width">
       <template slot-scope="scope">
         <!-- matchObj -->
         <span v-if="!item.hasOperating && !item.list">
           <span
             v-if="!item.date">{{item.matchObj ? item.matchObj[scope.row[item.attrName]] : scope.row[item.attrName]}}</span>
           <!-- 时间过滤 -->
           <span v-if="item.date">{{scope.row[item.attrName] | format}}</span>
         </span>
         <el-select v-if="item.list" v-model="scope.row[item.attrName]" placeholder="请选择"
           @change="changeSelect(scope.row, item.attrName)" :disabled="item.disabled">
           <el-option v-for="i in item.list" :key="i.value" :label="i.label" :value="i.value">
           </el-option>
         </el-select>

         <span v-if="item.hasOperating">
           <span v-for="i in item.hasOperating" :key="i">
             <!-- 根据状态显示文字 -->
             <el-button v-if="scope.row[status] == 0 && i =='isStatus'" type="text" size="small">
               {{item.statusList[scope.row[types]]}}
             </el-button>
             <!-- 是否置顶 -->
             <el-switch :active-value="1" :inactive-value="0" v-if=" i =='isTop'" v-model="scope.row[item.attrName]"
               @change="changeTop(scope.row)" @click.stop.native>
             </el-switch>
             <!-- 修改 -->
             <el-button v-if="i =='isEdit'" icon="el-icon-edit" type="text" size="medium"
               @click.stop="edit(scope.row)">
               编辑
             </el-button>
             <!-- 删除 -->
             <el-button v-if="i =='isDel'" icon="el-icon-delete" class="red" type="text" size="medium"
               @click.stop="del(scope.row)">删除
             </el-button>
           </span>
         </span>
       </template>
     </el-table-column>
   </el-table>
 </div>

<script>
 export default {
   name: 'ComTable',
   props: ['tableData', 'tableHeader', 'multiple', 'types', 'status'],
   data() {
     return {}
   },
   methods: {
     jumpDetails(row) {
       this.$emit('jumpDetails', row)
     },
     changeTop(val) {
       this.$emit('changeTop', val)
     },
     edit(val) {
       this.$emit('edit', val)
     },
     del(val) {
       this.$emit('del', val)
     },
     changeSelect(val, type) {
       this.$emit('changeSelect', {
         val: val,
         type: type
       })
     },
     handleSelectionChange(val) {
       this.$emit('handleSelectionChange', val)
     }
   }
 }

</script>

table组件引入

<ComTable :multiple="true"
            :tableData='tableåData'
            :tableHeader='tableHeader'
            @del="del"
            @edit='edit'
            @changeTop='changeTop'
            @jumpDetails='jumpDetails'
           @handleSelectionChange='handleSelectionChange'>
  </ComTable>
tableHeader: [{
          title: '话题名称',
          attrName: 'topicTitle',
          tooltip: true,
          align: "left",
          headerAlign: 'center',
          width: '27%'
        },
        {
          title: '创建者',
          attrName: 'createUserName',
          align: "center",
          headerAlign: 'center',
          width: '15%'
        },
        {
          title: '评论量',
          attrName: 'commentNum',
          align: "center",
          headerAlign: 'center',
          width: '10%'
        },
        
        {
          title: '上传时间',
          attrName: 'createTime',
          date: 'format',
          align: "center",
          headerAlign: 'center',
          width: '15%'
        },
        {
          title: '是否置顶',
          attrName: 'topFlag',
          hasOperating: ['isTop'],
          align: "center",
          headerAlign: 'center',
          width: '10%'
        },
        {
          title: '是否公开',
          attrName: 'isPublic',
          matchObj: {
            0: '是',
            1: '否'
          },
          align: "center",
          headerAlign: 'center',
          width: '14%'
        },
        {
          title: '是否专家对话',
          attrName: 'isExpert',
          matchObj: {
            0: '是',
            1: '否'
          },
          align: "center",
          headerAlign: 'center',
          width: '16%'
        },
        {
          title: '状态',
          hasOperating: ['isEdit', 'isDel'],
          align: "center",
          headerAlign: 'center',
          width: '18%'
        }
      ],

大概思路是这样，后期会优化