Vue3 + TS + Element-Plus 封装的 Table 表格组件

代码中主要增加了3个插槽,operationsStart 从操作栏开头增加按钮,operationsStart 从操作栏结尾增加按钮,还有一个插槽用来自定义列的内容,就是 TableModel里面的Key

<template>
  <el-table
    border
    stripe
    :data="data"
    :height="tableHeight"
    table-layout="fixed"
    :row-key="rowKey"
    :highlight-current-row="highlightCurrentRow"
    :tree-props="treeProps"
    :header-cell-style="{
   
      background: '#f5f7fa',
      color: '#606266',
      fontSize: '13px',
    }"
    @selection-change="handleSelectionChange"
    :v-loading="loading"
    :row-class-name="tableRowClassName"
    :expand-row-keys="expandRowKeys"
    class="absolute"
  >
    <el-table-column
      v-if="showSelection"
      align="center"
      fixed
      type="selection"
      width="55"
    />
    <el-table-column
      v-for="tableModel in tableModels"
      :key="tableModel.key"
      :prop="tableModel.key"
      :label="tableModel.label"
      :width="tableModel.width"
      :min-width="tableModel.minWidth"
      :align="tableModel.align"
      :header-align="tableModel.headerAlign"
    >
      <template #default="{ row }">
        <slot
          v-if="slots[tableModel.key]"
          :name="tableModel.key"
          v-bind="row"
        ></slot>
        <span v-else>
          {
   {
    row[tableModel.key] }}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      :width="operationsWidth"
      :min-width="minWidth"
      :align="operationsAlign"
      :header-align="operationsHeaderAlign"
      v-if="shoeOperations"
    >
      <template #default="{ row, $index }">
        <slot name="operationsStart" v-bind=

你可能感兴趣的:(Vue,3,vue.js,elementui,javascript)