Element-ui的 Table简单封装——2022.05.17更新

换工作，使用UI框架从 iVew换到 Element-ui，发现 Element-ui的 Table没有 iView方便，需要做一点封装，记录一下，暂时做得很简单，只加上一些必要的属性，其他属性有需要再加

2022.05.17 经过一段时间的使用，断断续续修修补补，更好用了一点点，更方便 table高度的设置等，可直接点击下方连接查看 ↓↓↓
直接点击此处查看更完善一点的版本

1.【Table】组件

<template>
  <div class="TableGrid">
    <el-table
      header-row-class-name="table-list-header"
      row-class-name="table-list-row"
      :max-height="tableData.maxHeight"
      :data="tableData.data"
      @selection-change="handleSelectionChange">
      <!-- 遍历 columns -->
      <template v-for="(item, index) in tableData.columns">
        <!-- 选择框 -->
        <el-table-column
          v-if="item.selection"
          type="selection"
          width="50"
          fixed="left"
          align="center"
          :key="index"></el-table-column>
        <!-- 序号 -->
        <el-table-column
          v-else-if="item.index"
          type="index"
          width="100"
          fixed="left"
          label="序号"
          :index="item.indexMethod"
          :key="index"></el-table-column>
        <!-- 自定义内容 -->
        <slot
          v-else-if="item.slot"
          show-overflow-tooltip
          :name="item.slot"
          :fixed="item.fixed"
          :height="item.height"></slot>
        <!-- 常规字段 -->
        <el-table-column
          v-else
          show-overflow-tooltip
          v-bind="item"
          :min-width="item.minWidth"
          :key="index"></el-table-column>
      </template>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :current-page.sync="pagination.currentPage"
      :page-size="pagination.pageSize"
      :total="tableData.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    tableData: {
      type: Object,
      default() {
        return {
          columns: {
            type: Array,
          },
          data: {
            type: Array,
          },
          total: {
            type: Number,
          },
        };
      },
    },
  },
  data() {
    return {
      pagination: {
        pageSize: 10,
        currentPage: 1,
      },
    };
  },
  methods: {
    // 切换页码
    handleCurrentChange() {
      this.$emit('getData', this.pagination);
    },
    // 切换选择
    handleSelectionChange(val) {
      this.$emit('changeSelection', val);
    },
  },
};
</script>

2.父组件调用

<template>
  <div>
    <Table
      ref="table"
      :table-data="tableData"
      @getData="getList"
      @changeSelection="changeTableSelection">
      <el-table-column
        slot="action"
        align="center"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="showDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </Table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: {
        columns: [
          {
            selection: true,
          },
          {
            index: true,
            indexMethod(index) {
              return index + 1;
            },
          },
          {
            prop: 'name',
            label: '姓名',
            fixed: 'left',
          },
          ...
          {
            slot: 'action',
          },
        ],
        data: [],
        total: 0,
      },
    };
  },
  methods: {
  	// 获取数据
  	getList(pagination = { currentPage: 1, pageSize: 10 }) {
  	  ...
  	  // 请求到数据后，重新设置分页器（用于一些主动查询场景）
  	  this.$refs.table.pagination = {
        ...pagination,
      };
  	},
    // 切换选择
    changeTableSelection(val) {
      console.log(val);
    },
    // 操作
    showDetail(row) {
      console.log(row);
    },
  },
};
</script>