Vue2对element-ui表格的二次封装

一、表格组件代码

/* 
element-ui二次封装表格组件 

*/
<template>
  <div v-loading="loading">
    <el-table
      ref="tableData"
      :stripe="stripe"
      :max-height="maxHeight"
      header-row-class-name="table-list-header"
      row-class-name="table-list-row"
      :size="tableSize"
      :data="data"
      @current-change="handleTableCurrentChange"
      @row-click="handleTableRowClick"
      v-bind="otherConfig"
    >
      <template v-for="(item, index) in columns">
        <!-- 选择框 -->
        <el-table-column
          v-if="item.selection"
          type="selection"
          width="55"
          :fixed="item.fixed"
          align="center"
          header-align="center"
          :key="`selection_${index}`"
        ></el-table-column>
        <!-- 序号 -->
        <el-table-column
          v-else-if="item.index"
          type="index"
          width="80"
          :fixed="item.fixed"
          label="序号"
          :index="item.indexMethod"
          :key="`index_${index}`"
        ></el-table-column>
        <!-- 多级表头 -->
        <el-table-column
          v-else-if="item.multi"
          align="center"
          :label="item.label"
          :key="`multi_${index}`"
        >
          <el-table-column
            v-for="(child, childIndex) in item.children"
            :key="`child_${index}_${childIndex}`"
            v-bind="child"
          >
          </el-table-column>
        </el-table-column>
        <!-- 自定义内容 （进行增删改查操作等或者插入HTML） --> 
        <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"
          :fixed="item.fixed"
          :min-width="item.minWidth"
          :key="`normal_${index}`"
        ></el-table-column>
        
      </template>
    </el-table>
    <!-- eslint-disable -->
    <!-- eslint-enable -->
    <!-- 自定义内容 -->
    <slot name="custom-content"></slot>
  </div>
</template>


<script>
export default {
  name: "Table",
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    wrapperHeight: {
      type: [Number, String],
      default: "100%", 
    },
    maxHeight: {
      type: [Number, String],
      default: "auto",
    },
    //表格格式
    tableSize: {
      type: String,
      default: "medium",
    },
    //是否为斑马纹 table
    stripe: {
      type: Boolean,
      default: true,
    },
    otherConfig: {
      type: Object,
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    // 单选
    handleTableCurrentChange(currentRow) {
      this.$emit("changeCurrent", currentRow);
    },
    // 点击行获得行数
    handleTableRowClick(currentRow) {
      this.$emit("rowClick", currentRow);
    },
  },
  watch: {
    data() {
      // 重新请求数据时 table滚动到顶部
      this.$refs.tableData.$refs.bodyWrapper.scrollTop = 0;
    },
  },
};
</script>


<style>
</style>

二、在main.js全局注册

import Vue from 'vue'
import App from './App.vue'
import table from './components/Table' //自定义组件



//挂载全局组件
//使用组件
Vue.component("Table", table);

三、定义表格内容创建Ds.js文件

//表格的每列配置   后续需要可继续在这添加
export const columnsStaff=[
    { prop: "no", label: "工号", width: 150 },
    { prop: "name", label: "姓名", width: 100 },
    { prop: "sex", label: "性别", width: 100 },
    { prop: "professionName", label: "职业", width: 100 },
    { prop: "hireDate", label: "入职时间", width: 150 },
    { prop: "phone", label: "电话号码", width: 100 },
    { slot: 'action',}
]

四、组件中使用

<template>
  <div class="managerPerson-content">
    <!-- Table组件 -->
    <Table :columns="columns" :data="tableData" :loading="loading">
      <!-- 插槽内容 -->
      <template v-slot:action>
        <el-table-column label="操作" width="420">
          <template slot-scope="scope">
            <!-- 修改部门弹窗 -->
            <el-button type="primary" size="small" icon="el-icon-edit"
              >修改信息</el-button
            >

            <!-- 查看人员 -->
            <el-button type="primary" size="small" icon="el-icon-user"
              >查看人员</el-button
            >

            <!-- 删除人员 -->
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              >删除部门</el-button
            >
          </template>
        </el-table-column>
      </template>
    </Table>
  
  </div>
</template>

<script>

import { columnsStaff } from "./store/Ds.js";
export default {
  data() {
    return {
      loading:false,
      tableData: [{ no: "11111" }],
      columns: columnsStaff,
    };
  },
 
};
</script>