vue自定义封装table表格

 封装如下：

<template>
  <div>
    <el-table ref="multipleTable" v-bind="$attrs" highlight-current-row fit stripe v-on="$listeners">
      <template v-for="(item, index) in columns">
        <!--   表格特殊列     -->
        <el-table-column v-if="['index', 'selection'].includes(item.type)" :key="`columns_${index}`" v-bind="item"/>
        <!--   表格数据列     -->
        <el-table-column v-else :key="`columns_${index}`" v-bind="item">
          <template v-slot="scope">
            <slot :name="`${item.prop}`" :row="scope.row">
              <span v-if="item.func" class="func-data">{{ item.func(scope) }}</span>
              <span v-else class="plain-data">{{ scope.row[item.prop] }}</span>
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
/**
 * table组件封装
 * @columns {array} table lable显示的标题 对应的数组的key等信息
 * columns 属性兼容 element ui el-table-columns 的现有属性
 *   func  自定义方法
 *   columns slot的优先级高，有自定义方法处理自定义方法，无自定义方法显示数据
 *
 * tips：v-slot语法不支持vue2.6以下
 */
export default {
  props: {
    columns: {
      type: Array,
      default: () => {
        return []
      },
      required: true
    }
  },
  data() {
    return {}
  },
  methods: {
    /**
     * 调用当前页面的方法
     * event {string} 方法名
     * params {string | function} 参数或者回调方法
     */
    events(event, params = {}) {
      if (!event) {
        return console.error('events方法最少一个参数')
      }
      if (!this.$refs.multipleTable[event]) {
        return console.error(`${event}不是一个方法`)
      }
      this.$refs.multipleTable[event](params)
    }
  }
}
</script>

调用如下：

    <!-- 表格 -->
    <i-table ref="table" :data="data" :columns="columns" :key="tableKey">
      <template slot="status" slot-scope="{ row }">
        <el-tag v-if="row.commonGoodBrandStatus === 0">启用</el-tag>
        <el-tag v-if="row.commonGoodBrandStatus === 1" type="danger">停用</el-tag>
      </template>
      <template slot="img" slot-scope="{ row }">
        <el-image :src="imgChange(row)" style="width: 100px; height: 100px"/>
      </template>
      <template slot="action" slot-scope="{ row }">
        <el-button size="small" type="primary" @click="openDetailInfo(row)">详情</el-button>
        <el-button size="small" type="primary" @click="updateBrandInfo(row,0)">编辑基本信息</el-button>
        <el-button size="small" type="primary" @click="updateBrandInfo(row,1)">编辑资质</el-button>
        <el-button size="small" type="primary" @click="updateModeInfo(row)">编辑型号</el-button>
      </template>
    </i-table>

columns: [
        {
          type: 'index',
          label: '序号',
          width: '50',
          align: 'center'
        },
        {
          label: '中文名',
          prop: 'commonGoodBrandCnname'
        },
        {
          label: '英文名',
          prop: 'commonGoodBrandEnname'
        },
        {
          label: '别名',
          prop: 'commonGoodBrandAlias'
        },
        {
          label: '首字母',
          prop: 'commonGoodBrandFirstname'
        },
        {
          label: 'logo',
          prop: 'img'
        },
        {
          label: '状态',
          prop: 'status'
          // func: this.getStatus
        },
        {
          label: '操作',
          prop: 'action',
          width: '400'
        }
      ],

效果如图：