封装 element-ui el-table-蒲公英云

封装 element-ui el-table

element-ui el-table功能很强大，也很好用，但是组件写起来有些麻烦，需要进一步封装，下面是一个封装的例子，可以 formatData，可以利用 slot 动态传递模板，大家觉得有用可以看看

const columns = [{ key: 'name', minWidth: 150, fixed: true, showOverflowTooltip: true}, { slot: 'actions'}];
<v-table :data="data" :columns="columns">
  <template slot="actions">
    <<el-table-column>
   <el-button @click="buttonClick"></el-button>
</<el-table-column>
</template>
<v-table>
<template>
  <e-table
    :data="data"
    :border="!!border"
    style="width: 100%"
    :header-cell-style="headerCellStyle"
    :max-height="maxHeight"
    :empty-text="emptyText"
  >
    <!-- index column -->
    <template v-if="showIndex">
      <el-table-column
        :label="indexColumnOptions.label || '序号'"
        type="index"
        :fixed="indexColumnFixed"
        :width="indexColumnOptions.width || 50"
        :align="indexColumnOptions.align || 'left'"
        :show-overflow-tooltip="indexColumnOptions.showOverflowTooltip || false"
      ></el-table-column>
    </template>
    <!--  -->
    <template v-for="columnItem in columns">
      <template v-if="!columnItem.slot">
        <el-table-column
          :key="columnItem.key"
          :label="columnItem.label"
          :prop="columnItem.key"
          :align="columnItem.align || 'left'"
          :fixed="columnItem.fixed || false"
          :show-overflow-tooltip="columnItem.showOverflowTooltip || false"
          :min-width="columnItem.minWidth"
        >
          <template slot-scope="scope">
            { { 
              columnItem.formatData
                ? columnItem.formatData(scope.row[columnItem.key], scope.row)
                : scope.row[columnItem.key] || ''
            }}
          </template>
        </el-table-column>
      </template>
      <template v-else>
        <slot :name="columnItem.slot"></slot>
      </template>
    </template>
  </e-table>
</template>
<script>
export default { 
  name: 'VTable',
  props: { 
    border: Boolean,
    showIndex: { 
      type: Boolean,
      default: false,
    },
    indexColumnOptins: { 
      type: Object,
      default() { 
        return { };
      },
    },
    data: { 
      type: Array,
      default() { 
        return [];
      },
    },
    columns: { 
      type: Array,
      default() { 
        return [];
      },
    },
    headerCellStyle: { 
      type: Object,
      default() { 
        return { };
      },
    },
    maxHeight: String,
    emptyText: { 
      type: String,
      default: '暂无相关信息',
    },
  },
  data() { 
    return { };
  },
  computed: { 
    indexColumnFixed() { 
      return this.indexColumnOptins.fixed || this.columns.some((column) => !!column.fixed);
    },
  },
  mounted() { },
};
</script>
<style scoped></style>