Element UI Table表格封装

冷不防 2023-01-22 15:59 453阅读 0赞

### 说明 ###

针对Element UI table进行了简单封装，支持复杂表头、分页、跨行等。主要封装内容如下：

*  pagination：是否分页，默认true
 *  columns：列配置(支持复杂表头)
 *  data-url：获取数据的url，GET方法
 *  page-size：每页显示条数，默认10
 *  current-page：当前页码
 *  optionColumn：操作栏列
 *  show-loading：是否展示loading，默认true
 *  load-data：加载数据，返回固定结构的Json（优先级高于data-url）
 *  enable-auto-rowspan：是否允许自动跨行，默认false
 *  auto-row-span-key：自动跨行的key（对应表格列的prop属性）

完整代码：

[https://gitee.com/xgpxg/sim-framework/tree/sim-framework-20200621/sim-web/src/main/webapp/src/components/Table][https_gitee.com_xgpxg_sim-framework_tree_sim-framework-20200621_sim-web_src_main_webapp_src_components_Table]

### 使用 ###

<el-table-plus
          :data.sync="data"
          :page-size="10"
          :current-page.sync="currPage"
          data-url="/api/auth/user/permissions"
          :columns="columns"
          :selection="true"
          @select="select"
          :optionColumn="optionColumn"
          :max-height="'500px'"
        >
        </el-table-plus>

### el-table-plus属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>data</td> 
   <td>原生属性，表格数据，一个json对象，含分页数据(后端PageHelper分页)</td> 
   <td>Object</td> 
   <td>-</td> 
   <td>[]</td> 
  </tr> 
  <tr> 
   <td>columns</td> 
   <td>表格列配置，详情见下方columns配置</td> 
   <td>Array</td> 
   <td>-</td> 
   <td>[]</td> 
  </tr> 
  <tr> 
   <td>pagination</td> 
   <td>是否分页</td> 
   <td>Boolean</td> 
   <td>true/false</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>pageSize</td> 
   <td>分页大小</td> 
   <td>Number</td> 
   <td>-</td> 
   <td>10</td> 
  </tr> 
  <tr> 
   <td>dataUrl</td> 
   <td>加载数据的url，如果只是简单的加载数据，直接传入后台接口即可，默认GET请求</td> 
   <td>String</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>loadData</td> 
   <td>加载数据的方法(优先级高于dataUrl)</td> 
   <td>Function</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>selection</td> 
   <td>是否开启多选</td> 
   <td>Boolean</td> 
   <td>true/false</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>currentPage</td> 
   <td>当前页</td> 
   <td>Number</td> 
   <td>-</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>optionColumn</td> 
   <td>操作栏列，详情见下方optionColumn配置</td> 
   <td>Object</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>showLoading</td> 
   <td>是否展示加载遮罩层</td> 
   <td>Boolean</td> 
   <td>true/false</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>enable-auto-rowspan</td> 
   <td>是否允许自动跨行，默认false</td> 
   <td>Boolean</td> 
   <td>true/false</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>auto-row-span-key</td> 
   <td>自动跨行的key（对应表格列的prop属性）</td> 
   <td>Array</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>

### columns配置 ###

columns为一个数组，数组对象内容均为原生element ui的el-table-column属性（部分，如需支持所有属性或事件，可自行添加），已支持的属性如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>label</td> 
   <td>表头名称（原生）</td> 
   <td>String</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>prop</td> 
   <td>对应列内容的字段名（原生）</td> 
   <td>String</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>align</td> 
   <td>对齐方式（原生）</td> 
   <td>String</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>列宽（原生）</td> 
   <td>String</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>minWidth</td> 
   <td>列最小宽度（原生）</td> 
   <td>String</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>colums</td> 
   <td>嵌套列，用于复杂表头</td> 
   <td>Array</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>autoRowspan</td> 
   <td>当前列是否自动跨行</td> 
   <td>Boolean</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>

简单表头示例：

columns: [
              { 
                label: '权限ID', prop: 'purviewId', align: 'center', width: '100px'
              },
              { 
                label: '权限名称', prop: 'purviewName'
              },
              { 
                label: '权限编码', prop: 'purviewCode'
              }
            ]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d4Z3hncA_size_16_color_FFFFFF_t_70]  
复杂表头示例：

columns: [
              { 
                label: '权限ID', prop: 'purviewId', align: 'center', columns: [
                  { label: '权限ID', prop: 'purviewId'},
                  { label: '权限名称', prop: 'purviewName'},
                ]
              },
              { 
                label: '权限名称', prop: 'purviewName'
              },
              { 
                label: '权限编码', prop: 'purviewCode'
              }
            ]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d4Z3hncA_size_16_color_FFFFFF_t_70 1]

### optionColumn配置 ###

optionColumn为一个对象，对象内容均为原生element ui的el-table-column属性（部分，如需支持所有属性或事件，可自行添加），已支持的属性如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>label</td> 
   <td>表头名称（原生）</td> 
   <td>String</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>prop</td> 
   <td>对应列内容的字段名（原生）</td> 
   <td>String</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>align</td> 
   <td>对 齐方式（原生）</td> 
   <td>String</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>列宽（原生）</td> 
   <td>String</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>操作按钮配置，详情见下方optionColumn.options配置</td> 
   <td>Array</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>

### optionColumn.options配置 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>按钮类型（原生）</td> 
   <td>String</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>按钮大小（原生）</td> 
   <td>String</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>按钮文本</td> 
   <td>String</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>handler</td> 
   <td>点击按钮的回调，参数：当前行数据</td> 
   <td>Array</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>

示例：

optionColumn: { 
              options: [
                { 
                  type: 'text',
                  size: 'mini',
                  text: '新增',
                  handler: (row) => { 
                    //这里进行逻辑处理
                  }
                }, { 
                  type: 'text',
                  size: 'mini',
                  text: '删除',
                  handler: (row) => { 
                    //这里进行逻辑处理
                  }
                }
              ],
              width: '100px',
            }

[https_gitee.com_xgpxg_sim-framework_tree_sim-framework-20200621_sim-web_src_main_webapp_src_components_Table]: https://gitee.com/xgpxg/sim-framework/tree/sim-framework-20200621/sim-web/src/main/webapp/src/components/Table
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d4Z3hncA_size_16_color_FFFFFF_t_70]: /images/20221020/e3be111189664acaa38f232d8032257c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d4Z3hncA_size_16_color_FFFFFF_t_70 1]: /images/20221020/1926bb68af7249bea3c592b8c0185e1f.png