加快Vue项目的开发速度的方法(6)

<template>
 <el-row>
  <el-col :span="24">
   <el-table :data="list" border size="mini" @selection-change="handleSelectionChange" :max-height="tableHeight" v-bind="$attrs"> <!--  -->
    <template v-for="(column, index) in columns">
     <slot name="front-slot"> </slot>
     <!-- 序号 -->
     <el-table-column :key="index" v-if="column.type === 'selection'" type="selection" width="55"> </el-table-column>
     <!-- 复选框 -->
     <el-table-column :key="index" v-else-if="column.type === 'index'" type="index" width="50" label="序号"> </el-table-column>
     <!-- 具体内容 -->
     <el-table-column :key="index" v-else align="left" :label="column.title" :width="column.width">
      <template slot-scope="scope">
       <!-- 仅仅显示文字 -->
       <label v-if="!column.hidden"> <!-- 如果hidden为true的时候 那么当前格可以不显示，可以选择显示自定义的slot-->
        <!-- 操作按钮 -->
        <label v-if="column.type === 'operate'">
         <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="operate-button" v-for="(operate, index) in column.operates" :key="index" @click="handleClick(operate, scope.row)">
          {{operate.name}}
            
         </a>
        </label>
        <span v-else>
         {{scope.row[column.key]}}
        </span>
       </label>
       <!-- 使用slot的情况下 -->
       <label v-if="column.slot">
        <!-- 具名slot -->
        <slot v-if="column.slot" :name="column.slot" :scope="scope"></slot>
       </label>
      </template>
     </el-table-column>
    </template>
    <!--默认的slot -->
    <slot/>
   </el-table>
  </el-col>
 </el-row>
</template>

export default {
 name: 'base-table',
 props: {
  // 核心数据
  list: {
   type: Array,
   default: () => []
  },
  // columns
  columns: {
   type: Array,
   required: true,
   default: () => []
  }
 },
 data () {
  return {
   tableHeight: xxx
  }
 },
 methods: {
  // 处理点击事件
  handleClick(action, data) {
   // emit事件
   this.$emit(`${action.emitKey}`, data)
  }
 }
}

<base-table v-loading="loading" :columns="headers" :list="list" @view="viewCb">
 <!-- 自定义的slot -->
 <template slot="demoslot" slot-scope="{scope}">
  <span>
   {{scope.row}}
  </span>
 </template>
 <!-- 默认的slot 如果交互很复杂 我们还可以直接使用表格内部的组件 -->
 <el-table-column
  label="操作"
  width="200"
 >
  <template slot-scope="scope">
   <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" @click="defaultSlot(scope.row)">xxx</a>
  </template>
 </el-table-column>
</base-table>