封装 element-ui el-table

旧城等待， 2022-09-16 14:20 9阅读 0赞

> **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"
      >
        
        <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>