vue+element table的二次封装

<template>
    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            :cell-style="{textAlign:'center'}"
            @selection-change="change"
            :show-header="showHeader"
            :border="border"
            :max-height="maxHeight"
            :v-loading="loading"
            :class="className"
            element-loading-text="给我一点时间"
            stripe
            fit
            highlight-current-row

    >
        <template v-for="tableColumn in tableList">
        <el-table-column
                :type="tableColumn.type"
                :width="tableColumn.width"
                v-if="tableColumn.type === 'selection'"
        ></el-table-column>
<!--    slot 添加自定义配置项-->
        <slot
                v-if="tableColumn.slot"
                :name="tableColumn.slot"
        ></slot>
 <!--  component 特殊处理某一项-->
        <component
                    v-else-if="tableColumn.component"
                    :is="config.component"
                    :col-config="tableColumn"
        ></component>
        <el-table-column
                :label="tableColumn.label"
                :type="tableColumn.type"
                :prop="tableColumn.prop"
                :width="tableColumn.width"
                :fixed="tableColumn.fixed "
                :sortable="tableColumn.sortable"
                v-if="(tableColumn.type !== 'selection')&&(tableColumn.type !== 'slot')"
        >
        </el-table-column>
     </template>
    </el-table>
</template>

<script>

    export default {
      
        data(){
            return{}
        },
        props: {
            tableList: {
                type: Array,
                default: function() {
                    return [];
                }
            },
            tableData: {
                type: Array,
                default: function() {
                    return [];
                }
            },
            showHeader: {
                type: Boolean,
                default: true
            },
            border: {
                type: Boolean,
                default: false
            },
            maxHeight: {
                type: [String, Number],
                default: null
            },
            loading: {
                type: Boolean,
                default: false
            },
            className: {
                type: String,
                default: ""
            },
            tableRowClassName: {
                type: String,
                default: ""
            }
        }
    }
</script>
<style scoped>
</style>

<!-- slot="sex" 不能省略，需要与下面配置项中的对应 -->
<el-table-column slot="sex" label="性别">
                    <template slot-scope="scope">
                        <el-input :v-model='scope.row.sex === 0 ? "男" : "女"' :value='scope.row.sex === 0 ? "男" : "女"'></el-input>
                    </template>
                </el-table-column>

tableList = [
      { prop: 'date', label: '日期' },
      { prop: 'name', label: '姓名' },
      { prop: 'address', label: '地址' },
      // 模版中的元素需要对应的有 slot="opt" 属性
      { slot: 'opt' }]

<el-table-column label="变化" slot="change">
      <span :slot-scope="row">
        {{ row['change'] > 0 ? '+' + row['change']: row['change'] }}
      </span>
    </el-table-column>
    <el-table-column label="趋势" slot="trend">
      <span :slot-scope="row">
        {{ row['trend'] > 0 ? '+' + row['trend']: row['trend'] }}
      </span>
    </el-table-column>

<template>
  <my-table
    :tableData="tableData"
    :tableList="colConfigs">
  </my-table>
</template>
<script>
 
const PrefixPlusText = {
  props: ['colConfig'],
  template: `
    <el-table-column :label="colConfig.label">
      <span :slot-scope="{ row }">
        {{ parseInt(row[colConfig.prop]) > 0 ? '+' + row[colConfig.prop] : row[colConfig.prop] }}
      </span>
    </el-table-column>
  `
}
 
export default {
  data () {
    this.colConfigs = [
      { prop: 'change', label: '变化' component: PrefixPlusText },
      { prop: 'name', label: '趋势', component: PrefixPlusText },
    ]
    return {
      tableData: [{
        change: '12%',
        trend: '10%
      }, {
        change: '-12%',
        trend: '-10%'
      }]
    }
  }
}
</script>