Vue+element UI中table表格组件封装

1.封装的vue文件

<template>
  <div>
    <el-table
      :data="data"
      style="width: 100%"
      @selection-change="handleTableCurrentChange"
      @row-click="handleTableRowClick"
      :cell-style="cellStyle"
      :highlight-current-row="highlightCurrent"
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(6, 91, 91,0.9)"
    >
       <template v-for="(item, index) in columns">
         <el-table-column
           v-if="item.selection"
           type="selection"
           :key="`selection_${index}`"
         ></el-table-column>
         <!-- 序号 -->
         <el-table-column
           v-else-if="item.index"
           type="index"
           label="序号"
           :index="item"
           :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>
         <!-- 自定义内容 -->
         <slot
           v-else-if="item.slot"
           show-overflow-tooltip
           :name="item.slot"
           :fixed="item.fixed"
           :height="item.height"
         ></slot>
         <!--常规内容-->
         <el-table-column
           v-else
           v-bind="item"
           :key="`normal_${index}`"
         >

         </el-table-column>
       </template>

    </el-table>
    <div class="block">
      <el-pagination
        v-if="isPaginationShow && pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pagination.current"
        :page-size="pagination.size"
        layout="total ,prev, pager, next, jumper"
        :total="pagination.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tableView',
  props:{
    columns: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    pagination: {
      type: Object,
      default: () => ({
        current: 1,
        size: 10,
        total: 0,
      }),
    },
    isPaginationShow: {
      type: Boolean,
      default: true,
    },
    wrapperHeight: {
      type: [Number, String],
      default: '100%', // 一般情况下，更多地是配置父元素的高度，table的高度根据父元素高度计算
    },
    height: {
      type: [Number, String],
      default: 'calc(100% - 48px)', // table的默认高度是 父元素高度 减去 pagination高度，一般情况下，这个默认配置就够用了，有特殊场景可以另配置
    },
    maxHeight: {
      type: [Number, String],
      default: 'auto',
    },
    tableSize: {
      type: String,
      default: 'small',
    },
    stripe: {
      type: Boolean,
      default: true,
    },
    otherConfig: {
      type: Object,
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: false,
    },
    highlightCurrent: {
      type: Boolean,
      default: false,
    },
  },
  data(){
    return{

    }
  },
  methods:{
    cellStyle: function (e) {  //{row,column,rowIndex,columnIndex}
      let obj = {};
      this.$emit("cellStyle", e, (color = {}) => {     //将事件返回到调用组件的页面去判断 应该现实的颜色
        obj = color;
      });
      return obj;
    },
    // 切换页码
    handleCurrentChange(val) {
      console.log("000000",val)
      this.$emit('getData');
    },
    // 切换每页条数
    handleSizeChange(value) {
      // current-page和 page-size都支持 .sync修饰符，用了.sync修饰符，就不需要手动给 this.pagination赋值了
      this.pagination.size = value;
      this.$emit('getData');
    },
    // 切换选择
    handleSelectionChange(val) {
      this.$emit('changeSelection', val);
    },
    // 单选
    handleTableCurrentChange(currentRow) {
      console.log("changeCurr1111111ent",currentRow)
      this.$emit('changeCurrent', currentRow);
    },
    // 点击行
    handleTableRowClick(currentRow) {
      this.$emit('rowClick', currentRow);
    },
  },
  watch: {
    data() {
      // 重新请求数据时 table滚动到顶部
    },
    pagination(newData,oldData){
      console.log("newData",newData)

    }
  },
  mounted () {
    console.log("columns",this.columns)


  }
}
</script>

<style scoped>

</style>

2.在其它页面调用的方法
1）引入table封装组件

import TableView from "@/components/TableView/index";
export default {
    components: {TableView},
    dicts: ['emDrillShape', 'emDrillScope'],  //字典引用
    data() {
    return{
      //查询
        queryParams: {
          organizationDepartment: '',
          drillingShape: '',
          organizeUnit: ''
        },
        //分页
        pagination: {
          current: 1,
          size: 5,
          total: 0,
        },
        //表格数据
        rTableData: [],
        Columns: [
          {
            index: true,
            indexMethod(index) {
              return index + 1;
            },
          },
          {selection: true,},
          {prop: 'drillingTheme', label: '演练主题'},
          // { slot: 'dispatchState', },
          {prop: 'planName', label: '演练计划'},
          {prop: 'drillingTime', label: '演练时间'},
          {prop: 'drillingNum', label: '演练人数'},
          {prop: 'organizeUnit', label: '演练组织单位'},
          {prop: 'organizationDepartment', label: '演练组织部门'},
          {prop: 'organizationDepartment', label: '演练部门'},
          {prop: 'drillingShape', label: '演练形式', formatter: this.handleDrillingShape},
          {prop: 'drillingAddr', label: '演练地点'},
          {prop: 'siteLead', label: '现场指挥'},
          {prop: 'recordUser', label: '记录人'},
          {prop: 'createUserName', label: '填报人'},
          {prop: 'orgName', label: '填报部门'},
          {prop: 'companyName', label: '所属公司'},
          {slot: 'action',},
        ],
    }
    }
}

2）table代码引用

 <TableView
        :columns="Columns"
        :data="rTableData"
        :pagination="pagination"
        @getData="getEmerDrillRecordsList"
        :loading="loading"
        @changeCurrent="changeCurrent"
        :isPaginationShow="true"
        wrapperHeight="calc(100% - 45px)">
        <!-- wrapperHeight：父元素高度根据实际布局情况配置，大多情况可能是 外层祖父元素高度 减去 其他兄弟元素的高度，如果外层祖父元素高度或者兄弟元素的高度不固定，可能需要借助 js来计算 -->
        <el-table-column slot="action" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" click="checkDrillRecord(scope.row.drillingId)" class="qgreen"  v-hasPermi="['system:emergencyDrillingInfo:query']">查看
            </el-button>
            <el-button type="text" size="small" @click="editDrillRecord(scope.row)" class="qgreen" v-hasPermi="['system:emergencyDrillingInfo:edit']">修改
            </el-button>
            <el-button type="text" size="small" @click="delDrillRecord(scope.row.drillingId)" class="orange" v-hasPermi="['system:emergencyDrillingInfo:remove']">删除
            </el-button>
          </template>
        </el-table-column>
      </TableView>

3.获取列表方法

//获取列表
      getEmerDrillRecordsList() {
        //分页
        this.queryParams.pageNum = this.pagination.current
        this.queryParams.pageSize = this.pagination.size
        listEmergencyDrillingInfo(this.queryParams).then(res => {
          this.rTableData = res.rows
          this.pagination.total = res.total
          this.loading = false
        })
      },