封装一个表格vue-element

共用组件  TableModule.vue

<template>

  <div class="employment-block">

    <slot name="header"></slot>

    <el-table border :data="tableData" :header-cell-style=" { backgroundColor: '#F5F6FA', color: '#222' }" class="b-r-12 custom-table"

              :height="tableHeight"

              @selection-change="handleSelectionChange">

      <template>

        <el-table-column v-if="selection" type="selection" width="55" />

      </template>

      <template v-for="header in tableHeader">

        <el-table-column v-if="header.prop === 'actions'" :key="header.prop" :label="header.label" :min-width="header.width || 180">

          <template v-if="scope.row[header.prop] && scope.row[header.prop].length" slot-scope="scope">

            <span

              v-for="btn in scope.row[header.prop]"

              :key="btn.type"

              class="btn"

              :class="{ 'disabled': btn.disabled }"

              style="margin-right: 10px"

            >

              <router-link v-if="btn.to" :to="btn.to">{{ btn.label }}</router-link>

              <span v-else @click="btn.handleClick ? handleClickOpration(scope.row, btn.handleClick) : null">{{ btn.label }}</span>

            </span>

          </template>

        </el-table-column>

         <el-table-column v-else-if="header.type ==='special'" :key="header.prop" :label="header.label" :prop="header.prop" show-overflow-tooltip  :min-width="header.width || 140">

            <template slot-scope="scope">

              <div class="el-image flex-center">

                <div>

                   {{ scope.row[header.prop].value || '--' }}

                </div>

                <el-button class="button_el_no" style="color:#778BFF"  @click="scope.row[header.prop].handleClick ? handleClickOpration(scope.row, scope.row[header.prop].handleClick) : null">{{ scope.row[header.prop].label }}</el-button>

              </div>

            </template>

          </el-table-column>

        <el-table-column v-else-if="header.type ==='pop'" :key="header.prop" :label="header.label" :prop="header.prop" :min-width="header.width || 140">

          <template slot-scope="scope">

            <div class="table-special" :style="`width: ${header.width || 120}px`" @click="specialClick ? specialClick(scope.row) : null">

              {{ scope.row[header.prop] }}

            </div>

          </template>

        </el-table-column>

        <el-table-column v-else :key="header.prop" :label="header.label" :prop="header.prop" show-overflow-tooltip  :min-width="header.width || 140">

          <template slot-scope="scope">

            <router-link v-if="header.linkTo" :to="scope.row['linkTo']">

              {{ scope.row[header.prop] }}

            </router-link>

            <span v-else>

              {{ scope.row[header.prop] || '--' }}

            </span>

          </template>

        </el-table-column>

      </template>

    </el-table>

    <div v-if="pagination" class="table-page">

      <el-pagination background

                    @size-change="changePagination($event, 'sizeChange')"

                    @current-change="changePagination"

                    :current-page.sync="pagination.page"

                    :page-sizes="[1, 20, 50, 100]"

                    :page-size.sync="pagination.size"

                    layout="total, sizes, prev, pager, next, jumper"

                    :total="pagination.count" />

    </div>

  </div>

</template>

<script lang="ts">

import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({

  name: 'TableModule'

})

export default class TableModule extends Vue {

  @Prop({ required: true, type: Array }) readonly tableData: any

  @Prop({ required: true, type: Array }) readonly tableHeader: any

  @Prop({ required: false, type: Object }) readonly pagination: any

  @Prop({ required: false, type: Boolean, default: true }) readonly selection: boolean | undefined // 用于是否展示selection

  @Prop({ required: false, type: String }) readonly tableHeight: any // 用于表格固定高度

  @Prop({ required: false, type: Function }) readonly specialClick: ((item: any) => void) | undefined

  handleClickOpration(item: any, handle: string) {

    this.$emit(handle, item)

  }

  handleSelectionChange(val:any) {

    this.$emit('handleSelectionChange', val)

  }

  changePagination(size: any, type?: string) {

    this.$emit('changePagination', {

      size,

      type

    })

  }

}

</script>

<style lang="scss" scoped>

.table-special {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  cursor: pointer;

  color:#778BFF;

}

.employment-block{

  width: 100%;

}

.btn {

  cursor: pointer;

  color: $dd--info-color;

}

.table-page {

  text-align: center;

  margin-top: 10px;

}

.button_el_no{

  padding:0;

  margin:0;

  border:none;

  background: none;

}

.flex-center{

  display: flex;

  justify-content: space-between;

  align-items: center;

}

</style>

 将组件引入到使用的组件里面

import TableModule from '@/views/app/custom-views/yhr/components/TableModule.vue'

@Component({

  name: 'EmployeeRoster',

  components: { TableModule }

})

<template>用公用组件

    <el-card class="m-t-10">

      <table-module  

        :table-data="tableData"  // 传入数据

        :table-header="tableHeader" // 头部标题

        :pagination="pagination"  //分页 

        table-height="100vh - 129px - 91px - 40px"   //表格的高

        class="custom-table"    

        @handleEdit="handleEdit"   //点击事件 

        @handleEditAuthorization="handleEditAuthorization"

        @changePagination="changePagination"

      >

        <template #header>

          <div class="input-card flex-center">

            <div class="input-card-bottom">

              <div class="flex align-center m-r-30">

                <span class="m-r-15 fs-12 c-333 input-label">员工</span>

                <div class="flex align-center input-wrapper" @click="onSelectedAdmin('user')">

                  <div class="input">{{ filterData.userNames }}</div>

                  <div class="input-btn">请选择</div>

                </div>

              </div>

              <div class="flex align-center m-r-30">

                <span class="m-r-15 fs-12 c-333 input-label">部门</span>

                <div class="flex align-center input-wrapper" @click="onSelectedAdmin('org')">

                  <div class="input">{{ filterData.orgNames }}</div>

                  <div class="input-btn">请选择</div>

                </div>

              </div>

              <div class="flex align-center">

                <span class="m-r-15 fs-12 c-333 input-label">日期 </span>

                <el-date-picker

                  v-model="filterData.date"

                  type="daterange"

                  range-separator="~"

                  start-placeholder="开始日期"

                  end-placeholder="结束日期"

                  size="medium"

                  value-format="yyyy-MM-dd"

                  :picker-options="pickerOptions"

                  style="width: 270px;"

                  @change="filterChange"

                />

              </div>

            </div>

            <div class="input-card-button-slot no-margin">

              <el-button class="card-button-a" type="text" @click="clickList('HandleInduction')">添加员工</el-button>

              <el-button class="card-button" type="text"  @click="exportClick('import','rosterExcel')">导入</el-button>

              <el-button class="card-button" type="text" @click="exportClick('export','rosterExcel')">导出</el-button>

            </div>

          </div>

        </template>

      </table-module>

    </el-card>

 初始化定义数据

  tableHeader: any[] = [

    { label: '姓名', prop: 'name', linkTo: true },

    { label: '职位', prop: 'position' },

    { label: '入职日期', prop: 'entryDate' },

    { label: '所在部门', prop: 'primaryOrganization' },

    { label: '人员类型', prop: 'employeeType' },

    { label: '手机号', prop: 'mobile' },

    { label: '应用授权', prop: 'productSuite' },

    { label: '角色', prop: 'role' },

    { label: '状态', prop: 'modifyApproval' },

    { label: '操作', prop: 'actions' }

  ]

const INIT_PAGINATION = {

  page: 1,

  size: 20,

  count: 10

}

  pagination: { page: number, size: number, count: number } = {

    ...INIT_PAGINATION

  }

tableData:any=[]

    try {

      const res: any = await Api.接口名称(tabelParams)

      this.pagination.count = Number(res.headers['x-total-count'])

      this.tableData = res.data.map((val: any) => {

        const temAction: any = [

          { label: '编辑', handleClick: 'handleEdit' }

        ]

        if (!this.isOrganizationCompanyEmployee) {

          temAction.push({

            label: '编辑授权',

            handleClick: 'handleEditAuthorization'

          })

        }

        return {

          ...val,

          linkTo: { name: 'EmployeeDetails', query: { id: val.userId, name: val.name } },

          actions: temAction

        }

      })

    } catch (err) {

      console.error(err)

    }

 // 监听table操作按钮的事件

  handleEditAuthorization(row: any) {

    this.$router.push({

      name: 'EmployeeAuthoriztion',

      query: { user: row.userId, name: row.name, type: 'edit' }

    })

  }

 // 监听table操作按钮的事件

  handleEdit(row: any) {

    this.$router.push({ name: 'EmployeeEdit', query: { id: row.userId } })

  }